跨域訪問,或者說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的要求不匹配,就會導致後面的請求失敗。

功能使用參考