Nginx CORS 跨域资源共享问题
## 背景
新项目上线，前后端分离，遇到了跨域资源共享的问题，导致请求根本无法发送到后端，前端和后端貌似只能有一个来处理跨域问题，我们这边要采用nginx来解决跨域问题。
## Nginx的CORS配置
网上好像都是三两行解决问题。可是我这边试了很多次，也没用。
add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers X-Requested-With; add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
## 上最终的配置文件
server { listen 80; server_name api.example.com; index index.jsp index.htm index.html index.do login.vm; charset utf-8; location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://192.168.150.184:10000; } location /pm/ { add_header Access-Control-Allow-Origin 'http://pm.example.com'; add_header Access-Control-Allow-Headers 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Auth-Token'; add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS'; add_header Access-Control-Expose-Headers 'X-Auth-Token'; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://192.168.150.184:10000/; if ($request_method = 'OPTIONS') { add_header Access-Control-Max-Age "3600" ; add_header Access-Control-Allow-Origin 'http://pm.example.com'; add_header Access-Control-Allow-Headers 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Auth-Token'; add_header Access-Control-Expose-Headers 'X-Auth-Token'; return 200; } } access_log /data/logs/example_com_access wwwlog; error_log /data/logs/example_com_error ; }
上诉的配置文件中，为何要加if判断呢？？？？
因为POST请求，浏览器会发送一个options的预检请求，主要是将本次的请求头发送给服务端，若服务端允许，再发送真正的POST请求，所以F12看到，经常POST会发送两次请求。因为后端java代码没有对options请求做处理。
导致options接口请求的时候，抱403 forbidden，这里nginx对options的请求直接返回200，不用到达接口层，直接允许POST响应头，即可使得上述失效配置能够生效。
## 2022年3月4日更新
经过测试的配置如下：
server_name test.example.com; root /usr/share/nginx/html/test; add_header Access-Control-Max-Age "3600"; add_header Access-Control-Allow-Origin 'http://www.example.com'; add_header Access-Control-Allow-Headers 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Auth-Token,X-App-Auth-Token'; add_header Access-Control-Expose-Headers 'X-Auth-Token,X-App-Auth-Token'; add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS'; if ($request_method = 'OPTIONS') { return 204; }
## Nginx proxy_pass详解
在nginx中配置proxy_pass代理转发时，如果在proxy_pass后面的url加/，表示绝对根路径；如果没有/，表示相对路径，把匹配的路径部分也给代理走。
假设下面四种情况分别用 http://192.168.1.1/proxy/test.html 进行访问。
第一种：
location /proxy/ {
proxy_pass http://127.0.0.1/;
}
代理到URL：http://127.0.0.1/test.html
第二种（相对于第一种，最后少一个 / ）
location /proxy/ {
proxy_pass http://127.0.0.1;
}
代理到URL：http://127.0.0.1/proxy/test.html
第三种：
location /proxy/ {
proxy_pass http://127.0.0.1/aaa/;
}
代理到URL：http://127.0.0.1/aaa/test.html
第四种（相对于第三种，最后少一个 / ）
location /proxy/ {
proxy_pass http://127.0.0.1/aaa;
}
代理到URL：http://127.0.0.1/aaatest.html
## Nginx 通过判断uri进行转发
配置如下：
location ~ / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://Tall; if ( $uri = "/examination/update-notice/v1" ) { proxy_pass http://192.168.50.184:9010; #return 403; } }
参考地址：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
https://segmentfault.com/a/1190000020725137
https://www.hi-linux.com/posts/60405.html
https://blog.csdn.net/weixin_43475207/article/details/90172613
https://blog.csdn.net/envon123/article/details/83270277
