nginx反向代理404问题解决说明

今天是个开心的日子，为啥呢？当然是我耗时多日的Vue+SpringBoot系统上线的日子啦！使用这两个技术编写的项目打包上线还是算蛮简单。后台Java只要会打 JAR 包就行（因为所有的依赖都会打包进去），前端Vue那是简单只需要 npm run build 操作即可。

那么在上线过程中会遇到什么问题呢？

问题1： Vue项目打包完之后接口请求不到后端出现404错误，这是由于Vue项目打包之后 proxyTable代理配置失效了！
问题2： 由于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;
}

以上就是我对Nginx反向代理的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。