前端build打包生成的dist使用 nginx 运行接口报错405和401问题。

本文介绍: 前端 build 打包生成的dist 使用 nginx 运行接口报错405和401问题。

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

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

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

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

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 连接升级。

 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;  
          }
        }