nginx+vue代理问题记录
后端项目组在内部搭建的YAPI上设计接口文档，前端项目组要进行模拟测试，由于YAPI上的接口分组是以数字ID进行区分的，这就导致，如果有多个数据来源，那么前端项目组要么自己写逻辑判断该调用哪个接口，要么测试的时候分开配置，显然这两项工作前端小组做不太愿意，那么就使用NGINX将多个请求地址统一一下或许是个好办法。
需求：
原YAPI接口地址1：http://192.168.10.10/mock/100+$接口请求路径(如：http://192.168.10.10/mock/100/user/list)
原YAPI接口地址2：http://192.168.10.10/mock/201+$接口请求路径(如：http://192.168.10.10/mock/201/info/list)
需要将访问地址合并：http://192.168.10.12/mock/api +$接口请求路径
（其中100,201是YAPI项目代号）
于是，爬坑开始。。nginx rewrite,porxy_pass 各种测试,原来想采用if 判断请求地址该去哪个路由，然后设置到变量里，但这种做法失败了，于是开始采用接口贪婪匹配的方法，结果就是要写很多行location。
开始使用rewrite 重定向到新的接口，随之的问题就是 get 请求一般没问题，但post 的时候由于是302跳转，所以会丢失请求的参数。前端采用vue同时也遇到访问跨域问题，以下通过事件一并说明解决方法：
遇到的问题：
1:请求是确定的get 还是get/post 不确定？
由于后端开发标准不一致，有时是get，有时是post，他们总喜欢按自己的方式来，可能如果细化get/post会增加工作量吧。
方案：所以我遇到的问题是，不清楚到底是哪种请求，所以nginx里的 location 路由方案就是 proxy_pass，而不是rewrite;
小坑：用rewirte对于get请求，是没有问题的，但是遇到post就会丢失数据，因为是302跳转，没有二次提交post;
2:关于nginx的 '/' 路径问题
由于开始没有明白nginx的匹配机制，匆忙实践，导致这个坑必须有；
列：
原访问地址：http://192.168.10.10/mock/100/user/list
新访问地址：http://192.168.10.10/mock/api/user/list
location /mock/api/user/ {
proxy_pass http://192.168.10.10/mock/100/api/;
proxy_set_header Host 192.168.10.10;
proxy_set_header X-Forwarded-For $remote_addr;
}
原访问地址：http://192.168.10.10/mock/201/info/list
新访问地址：http://192.168.10.10/mock/api/info/list
location /mock/api/info/ {
proxy_pass http://192.168.10.10/mock/201/api/;
proxy_set_header Host 192.168.10.10;
proxy_set_header X-Forwarded-For $remote_addr;
}
其中 location /mock/api/info/ 是普通匹配，也可以采用正则匹配，本来想想用另一种参数方法来实现只写一个 location
但失败了，
===============================================================
失败案例如下：
location /mock/api/ {
set $newuri '';
if ( $request_uri ~* /mock/api/user/ ) {
set $newuri '100';
}
if ( $request_uri ~* /mock/api/info/ ) {
set $newuri '201';
}
proxy_pass http://192.168.10.10/mock/$newuri/api/ ;
proxy_set_header Host 192.168.10.10;
proxy_set_header X-Forwarded-For $remote_addr;
}
但是这种做法无法正常运作，可能是没搞清楚nginx 机制，知道的道友，提点一二；
================================================================
反向代理(proxy_pass)的地址，如果最后有 '/',
如：proxy_pass http://192.168.10.10/mock/100/api/;
请求 http://192.168.10.12/mock/api/user/list ;
真实：http://192.168.10.10/mock/100/user/list
如果没有'/':，
如：proxy_pass http://192.168.10.10/mock/100/api;
请求 http://192.168.10.12/mock/api/user/list ;
真实：http://192.168.10.10/mock/api/mock/100/user/list
3: 跨域问题
由于前端采用的是vue.js实现，所有跨域其实有两个问题；
1:nginx的跨域设置
解决：nginx.conf配置
server {
listen 80;
server_name 192.168.10.12;
access_log logs/192.168.10.12.access.log;
root D:/wwwroot/192.168.10.12;
index index.php default.php index.html index.htm default.html default.htm;
include rewrite/192.168.10.12conf;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
error_page 403 /403.html;
error_page 404 /404.html;
error_page 502 /502.html;
location /mock/api/user/ {
proxy_pass http://192.168.10.10/mock/100/api/;
proxy_set_header Host 192.168.10.10;
proxy_set_header X-Forwarded-For $remote_addr;
}
location /mock/api/info/ {
proxy_pass http://192.168.10.10/mock/201/api/;
proxy_set_header Host 192.168.10.10;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
关键是在配置中加入：
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
采用postman进行访问测试，正常！但用vue项目访问，仍然出现跨域问题；于是看下面的解决方案；
2:vue的跨域代理访问
解决：
前提，nginx的跨域访问正常。
vue:在webpack的配置文件设置代理接口访问属性
webpack 项目目录 config/index.js
proxyTable: {
'/mock/api/':{
target:'http://192.168.10.12/',
changeOrigin: true,
pathRewrite: {
'^/mock/api': '/mock/api'
}
}
}意思就是，如何本地是采用localhost启动的测试，就是把请求发送到代理地址去解析；
访问 http://localhost/mock/api/user/list 实际：http://192.168.10.12/mock/api/user/list
这样vue的跨域问题不会出现了。
-------------------------------
以上花了整整1天多解决，走了很多弯路，这就是没系统学过nginx直接上手必须要经历的坑。