CORS跨域資源共享

chenhao_ch發表於2015-11-30
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進行設定時，請求是報錯的。如圖:

ajax跨域請求報錯

設定Access-Control-Allow-Origin後，可以正常獲得資料。如下圖，第一張是返回的結果，第二張是headers資訊。

clipboard.png

clipboard.png

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'資訊。如圖：

clipboard.png

要支援跨域指令碼error資訊的輸出，需要兩步：

  1. 伺服器對js資源的header做Access-Control-Allow-Origin的設定

  2. script標籤中新增屬性crossorigin="anonymous"
    加上上面的邏輯後，錯誤資訊就可以正常輸出了：

clipboard.png

CORS解決跨域圖片資訊獲取

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

clipboard.png

如果對圖片的header設定了Access-Control-Allow-Origin，就可以正常呼叫這些方法。

相關文章