CORS方式實現ajax跨域 --- nginx配置

實際跨域問題及其解決方案

1.課題：ajax實現跨域訪問

2.背景：

1.畫面服務器：192.168.196.6 → tomcat服務
2.js模板服務器：192.168.196.8 → nginx服務
3.畫面服務需跨域請求js資源

3.錯誤：

過程當中通過了幾回配置，出現過如下錯誤

1.No 'Access-Control-Allow-Origin' header is present on the requested resource,The response had HTTP status code 404
2.No 'Access-Control-Allow-Origin' header is present on the requested resource,The response had HTTP status code 405

4.解決：

nginx服務配置(nginx.conf)：

location xxx {

    alias xxx;

    --容許GET請求，GET請求時返回如下頭信息
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
    }

    --容許預檢請求，預檢請求時返回如下頭信息
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With';
        add_header 'Content-Length' 0;
        return 204;
    }
}

分析：
1.個人跨域請求是GET方法，因此只配置GET就好用了。
2.個人請求是非簡單請求，因此須要給預檢請求(OPTIONS)配置接口。

學習與總結

CORS理解

CORS是一個W3C標準，全稱是Cross-origin resource sharing（跨域資源共享）。
CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

CORS分類

瀏覽器將CORS請求分紅兩類：

• 簡單請求（simple request）
• 非簡單請求（not-so-simple request）

簡單請求

• 知足如下兩個條件就是簡單請求

  • (1) 請求方法是如下三種方法之一： HEAD，GET，POST

  • (2) HTTP的頭信息不超出如下幾種字段：

    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

  • 請求過程
    1.瀏覽器直接發出CORS請求。跟普通請求相比，增長一個Origin字段。

    GET /cors HTTP/1.1
      Origin: http://192.168.196.160
      Host: xxx
      Accept-Language: xxx
      Connection: xxx
      User-Agent: xxx

    2.若是Origin指定的域名在許可範圍內，服務器返回的響應，會多出頭信息字段Access-Control-Allow-Origin（也可能多出其餘可選字段）

    Access-Control-Allow-Origin: http://192.168.196.160  //或者是 *,表示接受任意域名的請求。
     Content-Type: text/html; charset=utf-8

非簡單請求

• 簡單請求之外就是非簡單請求。非簡單請求就是對服務器有特殊的請求，好比請求方法是PUT或DELETE,或者Content-Type字段類型是application/json。

• 非簡單請求會在請求以前增長"預檢"請求(prelight)。

  • 預檢請求

    • 瀏覽器詢問服務器，當前網頁所在域名是否在服務器訪問許可名單(Origin)，是否容許該請求方法(Access-Control-Request-Method)和頭信息字段(Access-Control-Request-Headers)。

    • 服務器獲得預檢請求後，檢查Origin，Access-Control-Request-Method，Access-Control-Request-Headers字段，

      • 若是確認容許跨域請求，就能夠HTTP迴應中帶上這三個頭信息，以下

        Access-Control-Allow-Origin: 請求源域名或者*
           Access-Control-Allow-Methods: GET, POST, PUT
           Access-Control-Allow-Headers: X-Custom-Header

      • 若是不容許跨域請求，服務器返回正常相應，可是不帶cors頭信息字段，瀏覽器就會觸發錯誤以下

        XMLHttpRequest cannot load 請求源域名
           Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

• 預檢請求經過後，之後每次瀏覽器的正常cors請求都跟簡單請求同樣。請求頭信息會帶着origin，服務器的響應也都會有頭信息字段Access-Control-Allow-Origin。(參考簡單請求)

參考：
跨域資源共享 CORS 詳解 阮一峯
ajax跨域，這應該是最全的解決方案了 撒網要見魚