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上面的，我記得已經設置過跨域了，立刻去檢查一下，發現是沒問題的。爲了解決問題，乾脆把來源都放開了，以下圖：

 

可是比較悲催的是，仍是收到一樣的提示錯誤。。。

因而又翻了下阿里雲的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，值爲*，便可，以下圖：

 

添加生效後，通過測試，問題解決了！