Ant Design Pro of Vue 构建打包后使用 Nginx 发布,API 请求报 404 错
文章目录
- 问题描述
- 开发环境
- 复现步骤
- 解决问题
- 解决思路和步骤
- 解决问题
- 问题解析
- 分析总结
- 参考资料
问题描述
开发环境
Vue + Yarn + WebStorm + Nginx(来自 phpstudy_pro 集成环境)
复现步骤
- 根据 Ant Design Pro of Vue 官网文档安装部署搭建项目,具体细节这里不做细讲,下文都以项目在正常开发为前提,界面功能交互可正常操作,API 接口可正常访问。
- 执行
yarn build
构建打包成功,在根目录下生成dist
文件夹,就是打包后生成文件。 - 通过 phpstudy_pro 创建网站,将 上一步 dist 内所有文件复制到新创建的网站的根目录下。
- 修改上一步创建的网站的配置文件。下面是官网的配置代码:
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;
}
}
我调整简化完的配置代码如下:
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;
}
}
【说明】
集成环境或软件版本不同,可能配置文件内容会有差异,但大同小异,关键代码应该都一样。
切记,配置完,确认已保存配置文件,然后重启 Nginx!!!否则配置不会生效。
- 打开浏览器,访问项目,此时应该会发现静态资源正常访问,但是请求的 API 均报出 404 错误。
解决问题
解决思路和步骤
- 首先确认 API 服务正常(通过 API 测试工具,或找相关开发人员确认);
- 检查 Nginx 配置文件,确认没有问题;
- 通过排除法(开启和关闭注释)排查关键配置项;(虽然比较笨,但我就是通过该方式找到问题的,其实最佳方式应该是考虑如何查看请求转发日志,但我还没找到这个解决方案。)
通过以上三步我找到了问题所在,是配置项的问题,其实说到底还是配置文件有问题,配置项语法没问题,是由于不了解配置项的值的意义,才出现错误的。这个配置项是 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