本文由簡體中文內容自動轉碼而成。阿里雲不保證此自動轉碼的準確性、完整性及時效性。本文内容請以簡體中文版本為準。

配置跨域資源共用

更新時間:2024-12-12 19:25

當您的業務接入ESA後,需要跨域共用或者訪問資源時,您可以通過節點HTTP回應標頭來實現跨域訪問。

什麼是跨域資源共用

跨域資源共用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"錯誤)。image

開啟跨域共用後

  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. 單擊確定

配置樣本

樣本一

設定規則為當使用者請求攜帶的Origin頭是http://example.com時,添加節點回應標頭為Access-Control-Allow-Origin: *

  • 如果使用者請求攜帶的Origin頭是http://example.com,則ESA節點將會響應Access-Control-Allow-Origin: *,滿足跨域共用存取原則,瀏覽器可正常顯示相應結果。

  • 本頁導讀 (M)
  • 什麼是跨域資源共用
  • 為什麼要配置跨域資源共用
  • 資料互動示意圖
  • 未開啟跨域共用
  • 開啟跨域共用後
  • 注意事項
  • 開啟跨域資源共用
  • 配置樣本
  • 樣本一
文檔反饋
phone 聯絡我們