一般这种情况,都是在前端配置了反向代理,如下图:
图中的 api 就可以代替 target 中的后台地址,这个在线上环境是有问题的,api 在线上环境就变成了字符串,所以所有接口都会出现404问题
前端解决方案如下:
在项目目录中添加 .env 文件,配置线上打包地址
在 main.js 中打印查看是否正确
添加 axios 拦截器,线上环境把 /api 截取掉
OK,这样接口404问题就在前端解决了
在服务器上解决接口404问题:
登录服务器,找到nginx的安装目录下:cd /etc/nginx
打开配置文件 vi nginx.conf
按 i 修改,新增
location /api {
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://www.baidu.com; // 接口地址,如果在同一个服务器上,可以直接这样写
}
保存退出,先esc,然后保存 :wq!
nginx支持热启动,所以直接重启命令 service nginx reload
nginx反向代理生效了,现在可以继续用代理,接口请求成功