build打包dist介绍

        dist 目录一个包含了打包后的项目代码相关依赖项的目录,用于部署时将项目移植到其他环境中。它提供了一个整理而简化的文件结构,使得部署过程更加方便和可靠

        直接打开报错空白可以使用 nginx启动。Nginx 官方网站nginx news 下载很快很方便,可以不用配置环境,直接在 终端管理员身份 进入 nginx 文件夹下面即可 start nginx 启动项目,但需要简单配置一下启动文件nginx.conf

情况一、接口405问题

         情况介绍,启动的项目中,接口完全没有问题,而且请求头也完整添加上了,传参要求也是按照服务端要求来的,但就 build 打包生成dist 文件nignx运行接口报错 405。

出现了这个问题就需要nginxconf 文件夹nginx.conf 文件中进行接口配置

server对应location 中添加以下代码

proxy_set_header Host app.dtuip.com;  
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Real-IP 头字段。它将客户端的真实 IP 地址(即发起请求用户的 IP 地址)作为值传递给后端服务器proxy_set_header X-Real-IP $remote_addr;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Real-IP 头字段。它将客户端的真实 IP 地址(即发起请求用户的 IP 地址)作为值传递给后端服务器proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 X-Forwarded-For 头字段。它将包含了请求经过的所有代理服务器的 IP 地址,并以逗号分隔的形式传递给后端服务器。这个字段可以用于追踪请求的路由路径proxy_set_header REMOTE-HOST $remote_addr;
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 REMOTE-HOST 头字段。它将客户端的 IP 地址作为值传递给后端服务器。请注意,REMOTE-HOST 这个头字段并不是标准的 HTTP 头字段,而是一种自定义的头字段。
proxy_set_header Upgrade $http_upgrade;(可忽略)
//该指令用于设置向后端代理服务器发送的 HTTP 请求头中的 Upgrade 头字段。它将客户端发送的 Upgrade 头字段的值原样传递给后端服务器。这个头字段通常用于支持 WebSocket 连接升级

我这边前端开发中接口代理路径都是用的 /api 开头,所以我这边完成的代码如下: 

如果遇见nginx报错,请在logs/error.log日志文件查看具体的报错记录

 server {
        listen       5173; //监听端口访问端口填写自己想要的端口号
        //服务器域名主机名称。默认都是不需要更改server_name  localhost;
        //  必要,一般只需要更改第一个路径location / {
            root   index_html/dist;  // 请求将会在该目录中查找文件index  index.html index.htm;
            try_files $uri $uri/ /index.html;
          }
        //重点接口配置 !!!  
        location ^~ /api/  {
          proxy_pass https://app.dtuip.com/;  //这个地址是我的绝对地址,按需替换自己proxy_set_header Host app.dtuip.com;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header Upgrade $http_upgrade;  
          }
        }

配置完成之后,接口请求应该可以解决405问题。

 

        如果这样配置还是不行,请往以下几个方面考虑:①请确保 Nginx 的配置文件正确设置了允许使用的请求方法默认情况下,Nginx 默认启用 GET 和 HEAD 方法,其他方法需要手动配置。确保你的配置文件包含allow 指令或者相应的 proxy_passfastcgi_pass 指令。②检查 Nginx 运行用户是否具有足够的权限执行请求的方法。确认 Nginx 用户对相关文件和目录有适当的访问权限。③如果你的 Nginx 配置了安全策略,如 mod_security 或 WAF(Web Application Firewall),它们可能会限制某些请求方法。在这种情况下,你需要更新安全策略或调整规则以允许所需的请求方法。④405 错误可能由后端应用程序返回,找服务端

情况二、 接口401问题。

        情况介绍代码本地启动时,接口完全没有任何问题,就的 build 打包生成dist 文件在 nginx运行中,就是接口报错 401 问题。

考虑方向:①接口传参错误。② dist 是静态文件,可能让你不能通过 post 发送请求。③接口环境存在问题,这里指的是当防火墙配置不正确或规则设置过于严格时,可能会导致接口返回 401 错误。其中的具体有四个方向:1.访问控制防火墙可能会对入站和出站的网络请求进行限制。2.请求过滤,某些防火墙支持对请求内容进行深度检查,以防止恶意请求和攻击。3.阻止认证服务:某些防火墙可能会阻止认证服务(如LDAP、Active Directory等)的通信,导致接口无法完成身份验证过程,从而返回 401 错误。4.SSL/TLS 检测:一些高级防火墙支持 SSL/TLS 检测功能,用于检查控制加密流量

解决方案

①仔细检查自己传参问题。

②因为静态文件而不能发送 post 请求的问题,可以转接到已经链接尝试解决 nginx静态html页面接收post请求,报405 not allowed错误 – 夏碌冬藏的个人空间 – OSCHINA – 中文开源技术交流社区

③尝试关闭你的防火墙试试。

        如果以上还是解决不了你的问题,还请你注意哟,nginx 有缓存,在你更改之后一定要清理并重新启动。或者换一个环境运行最新的代码,看看是否有新的奇效,我这边在解决 405 和 401 的问题的时候,一直用的是公司电脑没有解决掉问题,而周末回家时,我用自己电脑运行时,一样的代码一样的配置,它又是可以的,所以大家在解决问题的时候,要记得有多环境检测你的代码哟!!!

原文地址:https://blog.csdn.net/youyudehan/article/details/132279185

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_25084.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注