什么是跨域資源共享

跨域資源共享CORS（Cross-Origin Resource Sharing）簡稱跨域訪問，是HTML5提供的標準跨域解決方案，允許網頁從不同源加載和訪問跨域資源，使得跨域數據傳輸得以安全進行。更多信息可以參考跨域資源共享。

為什么要配置跨域資源共享

由于安全限制，瀏覽器一般會遵循同源策略（Same-Origin Policy），限制腳本發起的從不同域、子域、協議或端口加載和訪問資源的請求，例如example.com無法訪問example.org上的資源。通過配置跨域資源共享，可以在ESA上配置節點HTTP響應頭，為匹配的用戶請求返回對應的HTTP響應頭部，實現跨域資源的加載和訪問。

數據交互示意圖

未開啟跨域共享

1. Client向example.com發出請求，例如：http://example.com/index.html，example.com給client響應了文件index.html，但index.html通過腳本發起了請求：http://example.org/api。

2. Client向example.org發起請求時，攜帶了Origin：example.com，由于未開啟跨域共享，ESA默認不返回跨域頭，由于跨域限制，瀏覽器將攔截此請求的響應，導致報錯（頁面展示異常，顯示"No 'Access-Control-Allow-Origin' header is present on the requested resource"錯誤）。

開啟跨域共享后

1. Client向example.com發出請求，例如：http://example.com/index.html，example.com給client響應了文件index.html，但index.html通過腳本發起了請求：http://example.org/api。

2. Client向example.org發起請求時，攜帶了Origin：example.com，開啟跨域共享后，ESA將會返回配置的跨域頭，如：Access-Control-Allow-Origin:http://example.com。

3. Client收到響應后，檢查跨域響應頭為http://example.com，滿足跨域共享訪問策略，即可顯示相應結果。

注意事項

若使用OSS作為源站，OSS與ESA控制臺同時配置CORS，ESA的配置將覆蓋OSS的配置。OSS相關的跨域配置，請參見跨域設置。

開啟跨域資源共享

1. 登錄ESA控制臺。

2. 在左側導航欄，單擊站點管理。

3. 在站點管理頁面，單擊目標站點名稱，或對應站點操作列的詳情。

4. 在左側導航欄，選擇規則 > 轉換規則。

5. 單擊修改響應頭頁簽。

6. 單擊新建規則，填寫規則名稱并根據需求設置要匹配的用戶請求及修改返回客戶端的響應頭的具體配置。

   參數	示例
   操作方式	添加
   響應頭名稱	Access-Control-Allow-Origin
   響應頭值	填寫Access-Control-Allow-Origin響應頭對應的值為：* 說明 響應頭值配置為“*”時，表示任意來源。 響應頭值非“*”的情況下，必須包含協議頭“http://”或者“https://”。

   說明

   • 對于“非簡單請求”，您可能還需要添加Access-Control-Allow-Methods、Access-Control-Allow-Headers等響應頭，更多信息可以參考跨域資源共享相關信息。

   • 禁止配置“ali-”或者“Ali-”開頭的響應頭名稱。

   • 一個請求頭參數中可以配置多個值，多個值用英文逗號（,）分隔。

7. 單擊確定。

配置示例