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响应头,即可使得上述失效配置能够生效。

## 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

参考地址:

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

http://coderq.github.io/2016/05/13/cross-domain/

https://www.jianshu.com/p/1080014a234f

原文地址:https://www.cnblogs.com/skymyyang/p/13503851.html