Object Storage Service：配置跨域資源共用 (CORS)

網站靜態資源載入

網站 https://www.example.com 需要載入存放在OSS上的圖片、CSS及JS檔案。

步驟一：配置CORS規則

登入OSS管理主控台，進入目標Bucket的資料安全 > 跨網域設定，建立規則如下：

步驟二：驗證配置

訪問https://www.example.com，確認OSS資源（如圖片）載入正常，且瀏覽器控制台無CORS錯誤。

前端直傳檔案

使用者在網頁 https://app.example.com 上，將頭像、文檔等檔案直接上傳到OSS。

步驟一：配置CORS規則

登入OSS管理主控台，進入目標Bucket的資料安全 > 跨網域設定，建立規則如下：

步驟二：驗證配置

在https://app.example.com頁面執行上傳操作，確認檔案成功上傳至OSS，且瀏覽器控制台無CORS錯誤。

多環境支援

開發、測試、生產等多個子網域名稱（如dev.example.com, app.example.com）需要訪問同一個OSS資源。

步驟一：配置CORS規則

登入OSS管理主控台，進入目標Bucket的資料安全 > 跨網域設定，建立規則如下：

步驟二：驗證配置

分別在 https://dev.example.com 和 https://app.example.com 上進行訪問或上傳測試，確認操作均成功。

帶認證資訊的API式調用

前端應用https://api.example.com需要攜帶 Authorization 等自訂頭部訪問受保護的OSS資源。

步驟一：配置CORS規則

登入OSS管理主控台，進入目標Bucket的資料安全 > 跨網域設定，建立規則如下：

步驟二：驗證配置

在https://api.example.com頁面發起帶Authorization頭的請求，確認能成功訪問受保護的OSS資源。

安全最佳實務

遵循最小許可權原則。

• 精確配置來源(AllowedOrigin)：除非 Bucket 是完全公開的，否則嚴禁將AllowedOrigin設定為*。應精確指定提供服務的網站網域名稱，例如https://www.example.com。

• 收緊允許Methods(AllowedMethod)：只開放業務必需的 HTTP 方法。如果網站只需要讀取資料，則只配置GET和HEAD。

• 具體指定允許Headers(AllowedHeader)：對於攜帶認證資訊（如Authorization頭）的請求，嚴禁使用*，必須明確列出所有必要的要求標頭。

效能最佳實務

• 最佳化預檢緩衝：為 緩衝時間 (MaxAgeSeconds) 設定一個合理的值（如 86400 秒，即24小時），可以顯著減少預檢請求的數量，降低延遲和請求成本。

• 評估Vary: Origin 的影響：啟用 返回 Vary: Origin 雖然可以解決緩衝汙染問題，但會增加CDN緩衝的複雜性，可能導致快取命中率下降和回源流量增加，從而產生額外成本和延遲。請在評估後使用。

CDN加速情境

如果Bucket開啟了CDN加速並使用CDN網域名稱訪問，跨域請求將首先到達CDN節點。此時，必須在CDN控制台配置CORS規則，而不是在OSS。OSS側的CORS配置僅在請求直接存取OSS來源站點網域名稱時生效。詳情請參見配置跨域資源共用。

報錯No 'Access-Control-Allow-Origin' header is present on the requested resource.

通常是由於瀏覽器緩衝了不帶CORS頭的舊響應，或者CORS規則配置不當導致請求無法匹配任何規則。

建議先清除瀏覽器緩衝進行測試。如果仍然報錯，請參見以下步驟排查CORS跨域規則是否設定正確：

1. 登入OSS管理主控台。

2. 單擊Bucket列表，然後單擊目標Bucket名稱。

3. 在左側導覽列，選擇資料安全>跨網域設定。

4. 在跨網域設定頁面，單擊建立規則。

5. 在建立跨域規則面板，將來源設定為*，允許Methods全部勾選，允許Headers設定為*，暴露Headers設定為ETag和x-oss-request-id，緩衝時間（秒）設定為0，選中返回Vary: Origin，然後單擊確定。

6. 若問題仍然未解決，請任意登入一台伺服器，執行以下命令，查看跨域要求標頭。

   curl -v -o output_file.txt -H 'Origin:[$URL2]' '[$URL1]'

   說明

   • [$URL1]為需要請求的OSS資源連結。

   • [$URL2]為您配置跨域規則的來源地址。

   系統顯示類似如下。

   

   • 如果出現返回結果存在一個跨域頭且符合您配置的跨域頭，可能是由於您第一次請求沒有觸發跨域，返回的資料被本機快取；而第二次觸發跨域的請求沒有請求伺服器端，而是直接擷取本地的緩衝，導致跨域校正失敗。 請參考以下解決方案：

     • 在瀏覽器頁面單擊Ctrl+F5，清理瀏覽器緩衝，然後在測試跨域問題是否還存在。

     • 您將該OSS資源跨網域設定的緩衝時間設定為0，避免該資源在用戶端進行緩衝，每次請求都會重新在伺服器端擷取鑒權資訊。

       說明

       您可以在上傳檔案時設定檔案的cache-control為no-cache，已經上傳的檔案可以使用ossutil工具變更，如何設定cache-control請參見 set-meta（管理檔案中繼資料）。

     • 使用CDN加速OSS，這樣CDN所有請求都會返回CORS頭。

   • 如果返回結果存在兩個跨域頭或者不符合您在OSS配置的跨域頭，可能是由於使用了CDN加速OSS：

     1. 登入CDN控制台，臨時取消CDN加速OSS，確認跨域問題不存在。

     2. 確認後，單擊具體的網域名稱，依次單擊緩衝配置 > 節點HTTP回應標頭。

     3. 根據您的實際情況，設定自訂HTTP回應標頭。

7. 若跨域問題還是沒有解決，請參見OSS跨域資源共用（CORS）出現的常見錯誤及解決方案進一步排查處理。

報錯The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied origin.

伺服器返回了Access-Control-Allow-Origin頭，但其值與當前請求的Origin不匹配。這通常是由於緩衝問題導致的。當你配置了多個網站網域名稱訪問OSS時，瀏覽器或CDN可能記住了給其他網站的訪問許可，然後錯誤地提供給當前網站使用。

請在CORS規則中開啟返回Vary: Origin選項，這樣可以避免不同網站間的緩衝混亂；或者清除瀏覽器緩衝後重新訪問。

報錯Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

由於前端代碼發送了攜帶憑證的請求，Access-Control-Allow-Credentials為True，但Access-Control-Allow-Origin的值被配置為萬用字元*，出於安全考慮，不允許使用萬用字元來源，以防止任意域訪問資源並擷取Credentials資訊（包括Cookies、Authorization Headers等敏感性資料）。

• 如果您需要在要求標頭中保留Credentials資訊，將Access-Control-Allow-Origin的值從萬用字元*修改為具體的網域名稱（例如：https://example.com）。

• 如果您不需要在要求標頭中保留Credentials資訊，您可以在前端代碼中將xhr.withCredentials設定為false，並確保伺服器端的Access-Control-Allow-Credentials設定為false。

OSS跨域載入慢如何提升載入速度？

跨域請求實際上是請求Header中攜帶Origin頭請求OSS Bucket中的資源，所以載入快慢不取決於跨域，而是用戶端到OSS Bucket的物理鏈路。如果用戶端在中國香港，Bucket是中國內地的，那訪問是存在遠距離訪問的情況，推薦您使用OSS傳輸加速地址來訪問，這樣會對鏈路有加速最佳化，詳情請參見傳輸加速。