CORS跨域資源共享

介紹

CORS(Cross-Origin Resource Sharing)是指跨域資源共享，用於解決前端跨域問題。跨域問題最參見的方法就是使用JSONP，可是不少跨域問題JSONP是沒法解決的，好比

1. POST跨域請求

2. 'script error'的腳本錯誤提示

3. canvas中沒法得到跨域圖片的信息
   若是使用CORS，上面幾個問題均可以解決。

CORS的原理

服務端對header設置一個Access-Control-Allow-Origin: *，開啓跨域請求。*表示接受全部域名的請求。也能夠指定特定的域名 Access-Control-Allow-Origin: http://www.client.com。
我專門整理了一個使用CORS解決跨域的例子。能夠去github上下載。
在github的例子中，須要設置host, 將www.client.com和www.server.com都指向本地。而後使用本地服務器來測試。

127.0.0.1    www.client.com
127.0.0.1    www.server.com

其中www.client.com是指當前頁面的域名，www.server.com是第三方的域名。

CORS解決普通跨域請求

github的例子中，scripts/client.js中對www.server.com域名發送ajax請求。當www.server.com沒有對header的Access-Control-Allow-Origin進行設置時，請求是報錯的。如圖:

設置Access-Control-Allow-Origin後，能夠正常得到數據。以下圖，第一張是返回的結果，第二張是headers信息。

CORS解決跨域腳本報錯問題

同源策略影響到的不單單是ajax請求跨域接口，對跨域資源(包括js,圖片等)也會有限制。好比www.client.com域名下頁面請求了一個www.server.com域名下的js資源server.js，js資源能夠被正常加載和運行。可是當js資源中發生錯誤，有error拋出時，www.client.com中是沒法知道error的細節的。demo中index.html頁面對onerror進行了處理，輸出錯誤信息。可是當跨域資源www.server.com/demo/cors/scripts/server.js中拋出異常時，只能顯示'script error'信息。如圖：

要支持跨域腳本error信息的輸出，須要兩步：

1. 服務器對js資源的header作Access-Control-Allow-Origin的設置

2. script標籤中添加屬性crossorigin="anonymous"
   加上上面的邏輯後，錯誤信息就能夠正常輸出了：

CORS解決跨域圖片信息獲取

圖片做爲一種資源，也會受到同源策略的影響。好比，www.client.com域名下的頁面，經過canvas繪製了一個www.server.com域名的圖片，當使用canvas的toBlob(), toDataURL(), getImageData()時，會有error發生。如圖:

若是對圖片的header設置了Access-Control-Allow-Origin，就能夠正常調用這些方法。