什麼是 Cross-Origin Resource Sharing (CORS)?


Posted by hoyi-23 on 2021-05-23

CORS

指的是跨網域拉取資料。
它是一套規範,用來解決不同源取資料的問題。

為什麼要知道CORS?

當我們要拉取遠端資料時,如果呼叫API的網站與現在這個網站不同源時,雖然你的Request有發出去,Response也有送回來,但是因為同源政策,所以瀏覽器會把Response擋下來,不讓你的JavaScript拿到並且傳回錯誤。
而CORS就是來解決不同源拉取資要的問題。

什麼是不同源?

只要是Domin不一樣就是不同源,一個使用http、一個使用https也是不同源,基本上串接別人的API都會遇到這個不同源的狀況。
可以使用這個 網站 測試


CORS重點

在抓取資料時,通常會遇到不同源的狀況,會出現以下錯誤:

CORS 這套規範告訴我們,如果想開啟跨來源 HTTP 請求的話,Server 必須在 response 的 Header 裡面加上Access-Control-Allow-Origin
當瀏覽器收到 response 後,會先檢查 Access-Control-Allow-Origin 的內容,如果內容有包含現在發起 request 的 origin,就會通過。

當我們開啟開發者工具,查看得到的response中的Header,會看到一行:
Access-Control-Allow-Origin: *
(*號表示萬用字源)
白話說明就是,接受任何一個origin。

如果要發起跨來源請求,需要確保Server端有加上Access-Control-Allow-Origin: *,不然 response 會被瀏覽器給擋下來並且顯示出錯誤訊息。

而CORS又把request分為兩種!

簡單請求

簡單來說就是,沒有加任何字定義的Header(custom header),然後使用GET的話,一定是簡單請求。

預檢請求

非簡單請求的通常會要帶一些使用者的資料,CORS規範要求瀏覽器在發出正式請求前,要先傳送「預檢(preflight)」請求,當伺服器許可後,
再傳送HTTP請求方法送出實際的請求。


#ajax #cors







Related Posts

Vue.js 學習旅程Mile 8 – Class & Style Binding

Vue.js 學習旅程Mile 8 – Class & Style Binding

快速排序(Quick Sort)

快速排序(Quick Sort)

DAY26:Two to One

DAY26:Two to One


Comments