Vue项目本地运行正常,打包上传到服务器后接口请求404的问题

1,008 阅读1分钟

vue项目在本地打包完成后,代理转发proxy就失去了作用(vue.config.js中的代理转发只在开发环境中有用)

如果在本地开发环境访问接口都正常,打包后在本地用nginx代理出现了404,通常来说是nginx代理转发时proxy_pass设置的问题,可以把nginx里的配置里的 ​​

proxy_pass http://ip:port;​​ 
改成
​​proxy_pass http://ip:port/;​​ 

即在url的后面加一个‘/’

区别:

url后面加‘/’,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走(相当于nginx匹配路径时,会吞并location后面的路径部分);如果没有 “/”,表示相对路径,则会把匹配的路径部分也给代理走(相当于nginx匹配路径时,会把location后面的路径部分直接拼接(追加)在url的‘/’后面)

举个例子:访问接口为 /api/login

当nginx配置文件proxy_pass后边的url带"/"时,代理到后端的路径为http://ip:port/login,省略(吞并)了匹配到的/api/路径;

location /api/ { 
  proxy_pass  http://ip:port/;}

当nginx配置文件proxy_pass后边的url不带"/"时,代理到后端的路径为http://ip:port/api/login,拼接了匹配到的location的/api/路径一起代理了;

location /api/ { 
  proxy_pass   http://ip:port;}