CDN惹的禍:記一次使用OSS設置跨域資源共享(CORS)不生效的問題


原文:

https://www.lastupdate.net/4669.html

昨天H5組的開發反饋了一個問題,說瀏覽器收不到跨域的配置,提示:Failed to load https://nnmjstore.xxx.com/records/34e38a6b-0aaf-4bc3-af73-1d9dffcdb6f8_cdhzmj_15: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://cdhzmjstore.xxx.com' is therefore not allowed access.

即:cdhzmjstore.xxx.com使用Ajax(我沒具體問,猜可能是上傳文件吧)訪問nnmjstore.xxx.com上的文件失敗了。

而nnmjstore.xxx.com的文件是存放在阿里雲oss上面的,我記得已經設置過跨域了,馬上去檢查一下,發現是沒問題的。為了解決問題,干脆把來源都放開了,如下圖:

CDN惹的禍:記一次使用OSS設置跨域資源共享(CORS)不生效的問題

 

但是比較悲催的是,還是收到同樣的提示錯誤。。。

於是又翻了下阿里雲的OSS文檔,摘錄如下:

同源策略

跨域訪問,或者說JavaScript的跨域訪問問題,是瀏覽器出於安全考慮而設置的一個限制,即同源策略。當來自於A網站的頁面中的JavaScript代碼希望訪問B網站的時候,瀏覽器會拒絕該訪問,因為A、B兩個網站是屬於不同的域。

在實際應用中,經常會有跨域訪問的需求,比如用戶的網站www.a.com,后端使用了OSS。在網頁中提供了使用JavaScript實現的上傳功能,但是在該頁面中,只能向www.a.com發送請求,向其他網站發送的請求都會被瀏覽器拒絕。這樣就導致用戶上傳的數據必須從www.a.com中轉。如果設置了跨域訪問的話,用戶就可以直接上傳到OSS而無需從www.a.com中轉。

跨域資源共享的實現

跨域資源共享(Cross-Origin Resource Sharing),簡稱CORS,是HTML5提供的標准跨域解決方案,OSS支持CORS標准來實現跨域訪問。具體的CORS規則可以參考W3C CORS規范。其實現如下:

  1. CORS通過HTTP請求中附帶Origin的Header來表明自己來源域,比如上面那個例子,Origin的Header就是www.a.com。
  2. 服務器端接收到這個請求之后,會根據一定的規則判斷是否允許該來源域的請求。如果允許的話,服務器在返回的響應中會附帶上Access-Control-Allow-Origin這個Header,內容為www.a.com來表示允許該次跨域訪問。如果服務器允許所有的跨域請求,將Access-Control-Allow-Origin的Header設置為*即可,
  3. 瀏覽器根據是否返回了對應的Header來決定該跨域請求是否成功,如果沒有附加對應的Header,瀏覽器將會攔截該請求。如果是非簡單請求,瀏覽器會先發送一個OPTIONS請求來獲取服務器的CORS配置,如果服務器不支持接下來的操作,瀏覽器也會攔截接下來的請求。

OSS提供了CORS規則的配置從而根據需求允許或者拒絕相應的跨域請求。該規則是配置在Bucket級別的。詳情可以參考PutBucketCORS

這里有幾個要點:

  • CORS相關的Header附加等都是瀏覽器自動完成的,用戶不需要有任何額外的操作。CORS操作也只在瀏覽器環境下有意義。
  • CORS請求的通過與否和OSS的身份驗證是完全獨立的,即OSS的CORS規則僅僅是用來決定是否附加CORS相關的Header的一個規則。是否攔截該請求完全由瀏覽器決定。
  • 使用跨域請求的時候需要關注瀏覽器是否開啟了Cache功能。當運行在同一個瀏覽器上分別來源於www.a.com和www.b.com的兩個頁面都同時請求同一個跨域資源的時候,如果www.a.com的請求先到達服務器,服務器將資源帶上Access-Control-Allow-Origin的Header為www.a.com返回給用戶。這個時候www.b.com又發起了請求,瀏覽器會將Cache的上一次請求返回給用戶,此時Header的內容和CORS的要求不匹配,就會導致后面的請求失敗。

 

這時候突然想起,為了加速訪問,我們在OSS的前端使用了阿里雲CDN服務,這樣的話,CDN有可能覆蓋了OSS的設置,也就是說,跨域設置需要在CDN上做。

一時半伙找不到文檔,也不會設置,就發了個工單詢問。技術工程師響應的超級快,比以往每一次都快,並且直接告訴了方法,確實和我猜測的一樣。

在CDN控制台,找到nnmjstore.xxx.com,點設置-》緩存控制-》設置HTTP,添加一個HTTP頭,參數為Access-Control-Allow-Origin,值為*,即可,如下圖:

CDN惹的禍:記一次使用OSS設置跨域資源共享(CORS)不生效的問題

 

添加生效后,經過測試,問題解決了!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM