Ant Design Pro of Vue 构建打包后使用 Nginx 发布，API 请求报 404 错

问题描述

开发环境

Vue + Yarn + WebStorm + Nginx(来自 phpstudy_pro 集成环境)

复现步骤

1. 根据 Ant Design Pro of Vue 官网文档安装部署搭建项目，具体细节这里不做细讲，下文都以项目在正常开发为前提，界面功能交互可正常操作，API 接口可正常访问。
2. 执行 yarn build 构建打包成功，在根目录下生成dist文件夹，就是打包后生成文件。
3. 通过 phpstudy_pro 创建网站，将 上一步 dist 内所有文件复制到新创建的网站的根目录下。
4. 修改上一步创建的网站的配置文件。下面是官网的配置代码：

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        # 用于配合 browserHistory 使用
        try_files $uri $uri/ /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.loacg.com/$1 permanent;

    }
    location /api {
        proxy_pass https://preview.pro.loacg.com;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

我调整简化完的配置代码如下：

server {
    listen        8093;
    server_name  edumis-admin.test;
    root   "E:/www.bch/www.dist";
    location / {
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://test-api.51blog.xyz;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
    location /uploadfile {
        proxy_pass http://test-api.51blog.xyz;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

【说明】
集成环境或软件版本不同，可能配置文件内容会有差异，但大同小异，关键代码应该都一样。

切记，配置完，确认已保存配置文件，然后重启 Nginx！！！否则配置不会生效。

5. 打开浏览器，访问项目，此时应该会发现静态资源正常访问，但是请求的 API 均报出 404 错误。

解决问题

解决思路和步骤

1. 首先确认 API 服务正常（通过 API 测试工具，或找相关开发人员确认）；
2. 检查 Nginx 配置文件，确认没有问题；
3. 通过排除法（开启和关闭注释）排查关键配置项；（虽然比较笨，但我就是通过该方式找到问题的，其实最佳方式应该是考虑如何查看请求转发日志，但我还没找到这个解决方案。）

通过以上三步我找到了问题所在，是配置项的问题，其实说到底还是配置文件有问题，配置项语法没问题，是由于不了解配置项的值的意义，才出现错误的。这个配置项是 proxy_set_header Host $http_host;

解决问题

往往令我们抓狂是找不到问题或者说找问题的过程，只要定位了问题所在，有了思考的方向，就轻松多了。
具体解决办法如下：

将 proxy_set_header Host $http_host; 替换为 proxy_set_header Host $proxy_host; 保存配置文件，重启 Nginx，API 即可正常访问。

问题解析

先通过两种方式好好了解一下这个配置项proxy_set_header Host $http_host;：

• 如果你英文足够好，直接上nginx 官方 API ，直接、高效、专业，(链接地址：https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_set_header)
• 那只能通过查阅网络资料，google、csdn、百度一下、……

分析总结

配置项 proxy_set_header Host 的值可设置为：

• $proxy_host：如果配置了 upstream， 那么$proxy_host 的值就是 upstream 的名字；否则 $proxy_host 的值就是 proxy_pass 后面的地址；

• $host：如果请求 Header 里 Host 无值，直接拿 server_name 的值进行填充；否则，就直接拿 请求 Header 里面的 Host 的值。

• $http_host：如果请求 Header 里 Host 无值，直接拿 server_name 的值进行填充。并加上端口。如果是 80/443 则不加。 其实就是取请求 url 里面的值。 http://server:port/v1，如果 Header 里 Host 有值，就直接拿 请求 Header 里面的 Host 的值。

参考资料

• 解决 Nginx 配置 proxy_pass 后 返回 404 问题
• Module ngx_http_proxy_module