摘要：目前，所有瀏覽器都支持該功能，瀏覽器不能低于。因此，實(shí)現(xiàn)通信的關(guān)鍵是服務(wù)器。如果指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會多出頭信息字段也可能多出其他可選字段或者是表示接受任意域名的請求。

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

過程中經(jīng)過了幾次配置，出現(xiàn)過以下錯誤

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

nginx服務(wù)配置(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";
    }

    --允許預(yù)檢請求，預(yù)檢請求時返回以下頭信息
    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.我的請求是非簡單請求，所以需要給預(yù)檢請求(OPTIONS)配置接口。

CORS是一個W3C標(biāo)準(zhǔn)，全稱是Cross-origin resource sharing（跨域資源共享）。
CORS需要瀏覽器和服務(wù)器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了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.瀏覽器直接發(fā)出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指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會多出頭信息字段Access-Control-Allow-Origin（也可能多出其他可選字段）

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

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

非簡單請求會在請求之前增加"預(yù)檢"請求(prelight)。

預(yù)檢請求

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

服務(wù)器得到預(yù)檢請求后，檢查Origin，Access-Control-Request-Method，Access-Control-Request-Headers字段，

如果確認(rèn)允許跨域請求，就可以HTTP回應(yīng)中帶上這三個頭信息，如下

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

如果不允許跨域請求，服務(wù)器返回正常相應(yīng)，但是不帶cors頭信息字段，瀏覽器就會觸發(fā)錯誤如下

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

預(yù)檢請求通過后，以后每次瀏覽器的正常cors請求都跟簡單請求一樣。請求頭信息會帶著origin，服務(wù)器的響應(yīng)也都會有頭信息字段Access-Control-Allow-Origin。(參考簡單請求)

參考：
跨域資源共享 CORS 詳解 阮一峰
ajax跨域，這應(yīng)該是最全的解決方案了 撒網(wǎng)要見魚