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

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

過程中經過了幾次配置，出現過以下錯誤

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服務配置(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是一個W3C標準，全稱是Cross-origin resource sharing（跨域資源共享）。
CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
因此，實現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跨域，這應該是最全的解決方案了 撒網要見魚