vue配置转发代理_vue上线后nginx的转发代理怎么做proxy_pass来解决！

最近在vue本地做的转发代理api，上线后不管用了！于是去研究了下！本地的转发代理可以查看本站文章！

比较详细的一步一步说的！懒得看的可以直接看最后一步代码

首先打开nginx域名配置文件

1、匹配接口

匹配我们的转发接口

比如我们上线后请求的接口是/api/plus/ajax.php

那么我们就可以这样匹配带apilocation ^~ /api/ {

}

2、代理接口

我们需要用到的是  proxy_pass 译文为代理通行证

我们现在开始转发http://localhost:263/api/plus/ajax.php

方法1

用location ^~ /api/ {

proxy_pass http://localhost:198; # 转发地址

}

结果http://localhost:198/api/plus/ajax.php

方法2

用location ^~ /api/ {

proxy_pass http://localhost:198/; # 转发地址

}

结果http://localhost:198/plus/ajax.php

注意上面我们只是在198后面增加了/ 就直接把/api替换掉了！在nginx中配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走;如果没有/，则会把匹配的路径部分也给代理走。

方法3location ^~ /api/ {

rewrite ^/api/(.*)$ /$1 break;# 去除本地接口/api前缀, 否则会出现404

proxy_pass http://www.xhcss.com;

}

结果http://localhost:198/plus/ajax.php

我们可以用rewrite方法，替换掉api 也可以取得同样的效果

其他add_header xh $upstream_addr; # 这是查看转发后的地址

可以增加一些参数