OSS跨域資源共享(CORS)錯誤及排除
介紹
跨域資源共享(Cross-Origin Resource Sharing, CORS),介紹及配置請參看 跨域資源共享使用指南 。
配置項
CORS配置有以下幾項:
-
來源(AllowedOrigin):允許跨域請求的來源,可以同時指定多個。配置時需帶上完整的域資訊,例如
http://10.100.100.100:8001
或https://www.aliyun.com
。注意, 不要遺漏了協議名http或https ,如果埠不是預設的80
,還需要帶上埠。如果不能確定的域名,可以開啟瀏覽器的除錯功能,檢視header中的Origin
。域名支援萬用字元*
,每個域名中允許最多使用一個*
,例如https://*.aliyun.com
。如果來源指定為*
,則表示允許所有來源的跨域請求。 - Method:按照需求開通對應的方法即可,除錯時可以全部選擇。
-
Allow Header:允許的跨域請求header。允許配置多條匹配規則,以回車間隔。在Access-Control-Request-Headers中指定的每個header,都必須在Allowed Header中有對應項。Header容易遺漏,沒有特殊需求的情況下,建議設定為
*
,表示允許所有。大小寫不敏感。 - Expose Header:暴露給瀏覽器的header列表,即使用者從應用程式中訪問的響應頭(例如一個Javascript的XMLHttpRequest物件)。不允許使用萬用字元。具體的配置需要根據應用的需求確定,只暴露需要使用的header。如果不需要暴露可以不填。大小寫不敏感。該項是可選配置項。
- 快取時間(MaxAgeSeconds):瀏覽器對特定資源的預取請求(OPTIONS請求)返回結果的快取時間,單位為秒。如果沒有特殊情況可以稍大一點,比如60秒。該項是可選配置項。
CORS的配置方法一般是針對每個訪問來源單獨配置規則,不將多個來源混到一個規則,多個規則之間不要有覆蓋衝突。其它的選項只開放需要的許可權即可。
錯誤排除
報錯
CORS配置錯誤會報如下錯誤:
- 瀏覽器報類似如下錯誤:
OPTIONS http://bucket.oss-cn-beijing.aliyuncs.com/
XMLHttpRequest cannot load http://bucket.oss-cn-beijing.aliyuncs.com/. Response to preflight request doesn`t pass access control check: No `Access-Control-Allow-Origin` header is present on the requested resource. Origin `{yourwebsiet}` is therefore not allowed access. The response had HTTP status code 403.
- OSS報如下錯誤:
<Code>AccessForbidden</Code>
<Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Requet-Headers are not whitelisted by the resource`s CORS spec.</Message>
提示:
- CORS報錯一般是站點類應用導致,瀏覽器中可以檢視請求詳情。如Chrome,按
F12
開啟開發者工具
,在Network
中檢視相應元素;- OSS返回的錯誤可以通過抓包獲取。如使用Wireshark,篩選器可以指定為
host bucket-name.oss-cn-beijing.aliyuncs.com
。- OSS返回的錯誤也可以通過CORS的除錯程式 oss-h5-upload-js-direct 介面提示獲取。
其它錯誤請參看 常見錯誤及排除。
排錯
CORS可能錯誤如下:
-
來源(AllowedOrigin)
配置不正確; -
Method(AllowedMethod)
配置錯誤; -
Allow Header
配置錯誤; -
Expose Header
配置錯誤。
除錯方法:
- 來源(AllowedOrigin)設定成
*
,確認該配置項無誤。如果成*
後可以成功上傳,說明是來源(AllowedOrigin)
配置錯誤,請根據規則認真檢查; - Method(AllowedMethod) 全部選擇(GET、PUT、DELETE、POST、HEAD) ,確認該配置專案無誤;
- Allow Header配置成
*
,確認該配置無誤; - Expose Header設定為指定值或者不填,確認該項配置無誤。
提示:
- 在控制檯的
物件儲存OSS -> Bucket -> Bucket屬性 -> 跨域設定
配置上述選項。
相關文章
- 跨域資源共享(CORS)跨域CORS
- 跨域資源共享CORS跨域CORS
- 跨域資源共享——CORS跨域CORS
- CORS 跨域資源共享CORS跨域
- CORS跨域資源共享CORS跨域
- 跨域資源共享配置錯誤跨域
- CORS(跨域資源共享)筆記CORS跨域筆記
- 詳解 CORS 跨域資源共享CORS跨域
- 跨域資源共享CORS詳解跨域CORS
- 跨域資源共享 CORS 詳解跨域CORS
- 跨域資源共享(CORS)是什麼?跨域CORS
- 安全系列之:跨域資源共享CORS跨域CORS
- [CORS:跨域資源共享] W3C的CORS SpecificationCORS跨域
- 深入跨域問題(1) - 初識 CORS 跨域資源共享跨域CORS
- 跨域共享CORS詳解及Gin配置跨域跨域CORS
- 跨域資源共享 CORS 一些知識點跨域CORS
- 你所不知道的跨域資源共享(CORS)跨域CORS
- 跨域資源共享 CORS(Cross-origin resource sharing)跨域CORSROS
- Spring Boot中的跨域資源共享(CORS)處理Spring Boot跨域CORS
- 跨域資源共享跨域
- 跨站資源共享CORS原理深度解析CORS
- js跨域資源共享JS跨域
- 跨域CORS跨域CORS
- CORS跨域CORS跨域
- 深入剖析.NETCORE中CORS(跨站資源共享)NetCoreCORS
- 詳解XMLHttpRequest的跨域資源共享XMLHTTP跨域
- 跨域之CORS跨域CORS
- 跨域 Cors error跨域CORSError
- CORS(跨來源資源共享協議) 與 http 302狀態CORS協議HTTP
- 淺談前後端分離中的跨資源共享(CORS)後端CORS
- 跨域請求cookie資源共享詳解跨域Cookie
- JavaScript-CORS 跨域JavaScriptCORS跨域
- CORS跨域請求CORS跨域
- CORS跨域cookie傳遞CORS跨域Cookie
- CORS跨域問題梳理CORS跨域
- 跨域資源共享的各種方式(持續更新)跨域
- Nginx解決前端跨域問題 CORS跨域配置Nginx前端跨域CORS
- 深入跨域問題(2) - 利用 CORS 解決跨域跨域CORS