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

 

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

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

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