通過在邊緣安全加速 ESA上配置HTTP回應標頭，為網站啟用跨域資源共用CORS（Cross-Origin Resource Sharing），從而允許瀏覽器安全地從不同源載入和訪問資源。
為什麼要配置跨域資源共用
Web應用通常採用前後端分離的架構，前端應用（例如 http://example.com）需要從後端API（例如 http://example.org/api）擷取資料。由於瀏覽器的同源策略限制，預設情況下，這種跨源的HTTP請求會被禁止，導致前端應用無法正常工作。
通過在邊緣節點配置CORS策略，解決此跨域訪問問題。實現瀏覽器能夠驗證來自 http://example.org/api 的響應，並允許 http://example.com 的指令碼訪問這些響應資料，同時確保只有授權的源才能進行訪問。
方案架構
CORS的實現依賴於瀏覽器與伺服器之間的一套HTTP頭部協商機制。將CORS配置部署在ESA邊緣節點，可以在請求到達來源站點之前處理跨域邏輯，從而在ESA網路的邊緣實現統一的策略管理。
請求發起：位於
http://example.com的前端應用發起請求，訪問http://example.com/index.html資源。邊緣節點處理：ESA邊緣節點判斷請求內容是否存在緩衝，若有則直接返回緩衝內容，若無則回源擷取並緩衝後返回。
邊緣節點響應：成功響應用戶端請求內容（
index.html檔案），返回200 OK。用戶端處理：用戶端執行HTML中的指令碼。
跨域請求發起：用戶端針對指令碼中的跨域內容發起請求
GET http://example.org/api，並帶有要求標頭Origin:http://example.com。邊緣節點處理跨域請求：根據請求特徵判斷是否符合規則條件（例如：標題
Origin的值等於http://example.com），若滿足則添加CORS頭Access-Control-Allow-Origin:http://example.com。邊緣節點響應跨域請求：成功響應跨域請求內容，返回
200 OK。用戶端處理跨域請求：用戶端檢查回應標頭中的
Access-Control-Allow-Origin是否匹配當前頁面源（http://example.com），若匹配則正常響應並展示內容
配置樣本：開啟跨域資源共用
若使用OSS作為來源站點，OSS與ESA控制台同時配置CORS，ESA的配置將覆蓋OSS的跨網域設定。
針對所有請求生效
情境描述
允許當前網站（如example.com）下的所有請求均可跨域訪問任意地址上的資源。
配置步驟
在ESA控制台，選擇網站管理，在網站列單擊目標網站。
在左側導覽列，選擇，在轉換規則頁面選擇修改回應標頭頁簽，選擇回應標頭位置為ESA到用戶端，單擊新增規則按鈕。
在新增修改回應標頭規則頁面根據業務需求填寫相關欄位。可參考以下填寫：
規則名稱：填寫自訂規則名稱，如
rule-cors-for-all。如果請求匹配以下規則...：設定規則條件，用於匹配和過濾用戶端請求。本例中選擇所有傳入請求即可。
則執行…：設定修改回應標頭的規則執行動作，本例中填寫：
類型：選擇靜態
操作方式：選擇添加
回應標頭名稱：輸入
Access-Control-Allow-Origin回應標頭值：輸入
*
配置效果
在進行任意跨域請求時，ESA都會在回應標頭中增加Access-Control-Allow-Origin：*，瀏覽器即可成功響應並展示跨域資源。
針對指定請求生效
情境描述
針對用戶端請求中攜帶的origin標題的值包含網域名稱example.com下的任意子網域名稱，並且同時支援http協議和https協議，例如以下情況都允許跨域訪問資源：
origin:http://www.example.comorigin:https://www.example.comorigin:http://image.example.comorigin:https://image.example.com
在響應中添加CORS頭，CORS回應標頭內容與要求標頭中的origin一致。
配置步驟
在ESA控制台，選擇網站管理，在網站列單擊目標網站。
在左側導覽列，選擇，在轉換規則頁面選擇修改回應標頭頁簽，選擇回應標頭位置為ESA到用戶端，單擊新增規則按鈕。
在新增修改回應標頭規則頁面參考以下填寫：
規則名稱：填寫自訂規則名稱，如
rule-cors-origin。如果請求匹配以下規則...：設定規則條件，用於匹配和過濾用戶端請求，只對滿足特定條件的請求執行添加回應標頭的操作。本例中填寫
標題 origin的值 與Regex匹配 ^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$。也可直接編輯運算式如下：
(http.request.headers["origin"] matches "^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$")說明若您的套餐不支援使用Regex匹配，可以使用運算子
等於其中任意一個來匹配，並枚舉出允許跨域的origin標題值。也可直接編輯運算式如下：
(http.request.headers["origin"] in {"http://www.example.com" "https://www.example.com" "http://image.example.com" "https://image.example.com"})
則執行…：設定修改回應標頭的規則執行動作，本例中填寫：
類型：選擇動態
操作方式：選擇添加
回應標頭名稱：輸入
Access-Control-Allow-Origin回應標頭值：輸入
http.request.headers["origin"]
配置效果
在進行跨域請求時，請求中的origin頭符合規則時，則ESA將在回應標頭中增加Access-Control-Allow-Origin標題，標題值內容與用戶端請求中攜帶的Origin標題的值相同，瀏覽器即可成展示跨域資源。
