Object Storage Service：跨網域設定

網站靜態資源載入

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

前端直傳檔案

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

多環境支援

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

帶認證資訊的API式調用

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

簡單請求

簡單請求可以直接發送，處理流程如下：

1. 瀏覽器將Origin頭部添加到請求中，包含資源來源，例如Origin: https://www.example.com。

2. OSS將請求的HTTP方法以及Origin頭部的值與目標Bucket的CORS配置進行比較。如果存在匹配項，OSS將在響應中包含Access-Control-Allow-Origin頭部。

3. 瀏覽器接收響應並檢查Access-Control-Allow-Origin值是否與原始請求的網域名稱匹配。如果匹配則請求成功，否則請求失敗。

預檢請求

預檢請求需要先詢問伺服器是否允許，處理流程如下：

1. 瀏覽器發送一個OPTIONS請求，包含主請求的方法（Access-Control-Request-Method）和頭部（Access-Control-Request-Headers）資訊。

2. OSS根據CORS配置檢查請求的方法和頭部是否被允許。如果預檢請求中的任何方法或頭部值未包含在目標資源允許的方法和頭部集合中，請求將失敗，並且不會發送主請求。

3. 預檢通過後，執行與簡單請求相同的流程。

安全最佳實務

• 精確配置來源：除非Bucket完全公開，否則不建議將來源設定為*，應精確指定網站網域名稱。

• 收緊允許Methods：只開放業務必需的HTTP方法，如唯讀情境僅配置GET和HEAD。

• 明確列出允許Headers：遵循最小許可權原則，盡量明確列出必要的要求標頭，避免使用*。

效能最佳實務

• 最佳化預檢緩衝：為緩衝時間設定合理的值（如86400秒），可減少預檢請求數量，降低延遲和請求成本。

• 評估Vary: Origin的影響：啟用此選項可解決緩衝汙染問題，但可能導致CDN快取命中率下降和回源流量成本增加。建議僅在多來源或萬用字元情境下開啟。

結合CDN使用

如果Bucket開啟了CDN加速並使用CDN網域名稱訪問，跨域請求將首先到達CDN節點。此時有兩種配置方式：

• 在CDN配置CORS：在CDN控制台配置跨域規則，由CDN直接返回CORS頭部。詳情請參見配置跨域資源共用。

• 透傳來源站點CORS頭：CDN透傳OSS返回的CORS頭部，此時需在OSS配置CORS規則。

OSS側的CORS配置僅在請求直接存取OSS來源站點網域名稱、或CDN配置為透傳來源站點回應標頭時生效。

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

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

1. 清除瀏覽器緩衝後重新測試。

2. 檢查CORS規則的來源、允許Methods是否與實際請求匹配。

3. 臨時建立一條寬鬆的CORS規則進行排查：來源設定為*，允許Methods全部勾選，允許Headers設定為*，暴露Headers設定為ETag和x-oss-request-id，緩衝時間設定為0，勾選返回Vary: Origin。

4. 若問題仍未解決，在伺服器執行以下命令查看跨域要求標頭：

   curl -v -H 'Origin: <來源地址>' '<OSS資源連結>' -o output.txt

   根據返回結果排查：

   

   • 如果返回結果存在一個跨域頭且符合配置，可能是瀏覽器緩衝導致。請按Ctrl+F5清理瀏覽器緩衝，或將緩衝時間設定為0。

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

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

     • 確認後，在CDN加速網域名稱的缓存配置 > 修改出站回應標頭中設定自訂回應標頭。

5. 若問題還是沒有解決，請參見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選項，或清除瀏覽器緩衝後重新訪問。

The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when credentials mode is 'include'報錯？

前端代碼發送了攜帶憑證的請求（Access-Control-Allow-Credentials為True），但來源被配置為萬用字元*。出於安全考慮，瀏覽器不允許使用萬用字元來源。

解決方案：

• 如果需要在請求中保留Credentials資訊，將來源從*修改為具體的網域名稱（例如https://example.com），並確保伺服器端Access-Control-Allow-Credentials設定為true。

• 如果不需要在請求中保留Credentials資訊，在前端代碼中將xhr.withCredentials設定為false，並確保伺服器端Access-Control-Allow-Credentials設定為false或不返回該頭部。

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

跨域請求的載入速度取決於用戶端到OSS Bucket的物理鏈路，而非跨域本身。如果用戶端在中國香港而Bucket在中國內地，存在遠距離訪問的情況。推薦使用OSS傳輸加速進行訪問。