问题解决:
把nginx里的配置里的 proxy_pass http://127.0.0.1:8080; 改成proxy_pass http://127.0.0.1:8080/;
多加一个斜杠。

问题分析:
Vue项目打包完之后接口请求不到后端出现404错误,这是由于Vue项目打包之后 proxyTable代理配置失效了。
由于Vue项目打包之后代理失败,那么就需要使用Nginx进行反向代理请求了,可是还是出现404错误。在nginx中配置proxy_pass反向代理时,当在后面的url加上了 “/”,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走;如果没有 “/”,则会把匹配的路径部分也给代理走。

举个例子: 访问接口为 /api/menu/getMenuList
当nginx配置文件proxy_pass后边的url带"/"时,代理到后端的路径为http://127.0.0.1:8080/menu/getMenuList,省略了匹配到的/api/路径;

location /api/ { 
  proxy_pass   http://127.0.0.1:8080/;
}

当nginx配置文件proxy_pass后边的url不带"/"时,代理到后端的路径为:http://127.0.0.1:8080/api/menu/getMenuList,连同匹配到的/api/路径一起代理了;

location /api/ { 
  proxy_pass   http://127.0.0.1:8080;
}

参考学习文章:https://blog.csdn.net/qq_42784165/article/details/110297059

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐