技術標籤：NginxLinux

一、程式碼

先放上nginx配置程式碼

    # 以代理百度地圖api為例
    location /wpgmap/ {
        proxy_pass http://api.map.baidu.com/;
        # 配置跨域代理 
        add_header         Access-Control-Allow-Origin      $http_origin;
        add_header         Access-Control-Allow-Methods     GET,POST,OPTIONS,HEAD,PUT;
        add_header         Access-Control-Max-Age           3600;
        add_header         Access-Control-Allow-Credentials true;
        add_header         Access-Control-Allow-Headers     User-Agent,Origin,Content-Type,Accept,Authorization,X-Token;
        if ($request_method = OPTIONS){
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers User-Agent,Origin,Content-Type,Accept,Authorization,X-Token;
            add_header Access-Control-Max-Age 3600;
            add_header Content-Type 'text/plain; charset=utf-8';
            add_header Content-Length 0;
            return 200;
        }
    }
 

二、配置解釋

1、Nginx指令add_header和proxy_set_header的區別

如何理解反向代理？
Nginx是反向代理伺服器，我們可以從下面的圖來理解為什麼是反向代理。以Nginx為中心，資料的流向是從Server到Nginx再到Client，注意我說的是資料（響應資料），而不是請求。我們都知道水流一定是從上游流到下游，所以給Server一個別稱上游伺服器，當然這個別稱並不是我定義的。

proxy_set_header和add_header的區別

區別：proxy_set_header是Nginx設定請求頭資訊給上游伺服器，add_header是Nginx設定響應頭資訊給瀏覽器。

• proxy_set_header

  假如Nginx請求上游伺服器時，新增額外的請求頭，就需要使用proxy_set_header。在Java中使用HttpServletRequest#getHeader(String name)來獲取請求頭的值，name是請求頭的名稱。
  例如：proxy_set_header X-Request-URI $scheme://$host/$uri;

  String requestUrl = request.getHeader("X-Request-URI");
  if (requestUrl == null) {
      // 從Servlet伺服器獲取客戶端請求地址
      requestUrl = request.getRequestURL().toString();
  }
   
  

• add_header
Nginx響應資料時，要告訴瀏覽器一些頭資訊，就要使用add_header。例如跨域訪問（詳細參見Nginx跨域訪問配置）

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
  add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS'
  # 由於跨域請求，瀏覽器會先發送一個OPTIONS的預檢請求，我們可以快取第一次的預檢請求的失效時間
  if ($request_method = 'OPTIONS') {
  	add_header 'Access-Control-Max-Age' 2592000;
  	add_header 'Content-Type' 'text/plain; charset=utf-8';
  	add_header 'Content-Length' 0;
  	return 204;
  }
  

放上此段原文連結：https://blog.csdn.net/qq_30038111/article/details/95211271

CORS"跨域資源共享"（Cross-origin resource sharing）請求解釋

下面這些引數，有些是瀏覽器發出的，有些是伺服器端返回的，這裡就一起放在這裡了，詳細的看原文：點這裡

• Access-Control-Allow-Origin

該欄位是必須的。它的值要麼是請求時Origin欄位的值，要麼是一個*，表示接受任意域名的請求。

需要注意的是，如果要傳送Cookie，Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用伺服器域名設定的Cookie才會上傳，其他域名的Cookie並不會上傳，且（跨源）原網頁程式碼中的document.cookie也無法讀取伺服器域名下的Cookie。

• 
  
  

• Access-Control-Allow-Credentials

該欄位可選。它的值是一個布林值，表示是否允許傳送Cookie。預設情況下，Cookie不包括在CORS請求之中。設為true，即表示伺服器明確許可，Cookie可以包含在請求中，一起發給伺服器。這個值也只能設為true，如果伺服器不要瀏覽器傳送Cookie，刪除該欄位即可。

• Access-Control-Expose-Headers

該欄位可選。CORS請求時，XMLHttpRequest物件的getResponseHeader()方法只能拿到6個基本欄位：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他欄位，就必須在Access-Control-Expose-Headers裡面指定。

• Access-Control-Allow-Methods：

該欄位必需，它的值是逗號分隔的一個字串，表明伺服器支援的所有跨域請求的方法。注意，返回的是所有支援的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。

• Access-Control-Request-Headers

該欄位是一個逗號分隔的字串，指定瀏覽器CORS請求會額外發送的頭資訊欄位。

• Access-Control-Allow-Headers：

如果瀏覽器請求包括Access-Control-Request-Headers欄位，則Access-Control-Allow-Headers欄位是必需的。它也是一個逗號分隔的字串，表明伺服器支援的所有頭資訊欄位，不限於瀏覽器在"預檢"中請求的欄位。

• Access-Control-Max-Age：

該欄位可選，用來指定本次預檢請求的有效期，單位為秒。上面結果中，有效期是20天（1728000秒），即允許快取該條迴應1728000秒（即20天），在此期間，不用發出另一條預檢請求。

原文看這個：http://www.ruanyifeng.com/blog/2016/04/cors.html

也可以看看這篇講跨域的：https://segmentfault.com/a/1190000011145364