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;}