RFC-6454 The Web Origin Concept
https://datatracker.ietf.org/doc/html/rfc6454
有時透過AJAX取得資料時會發現有一個錯誤訊息 XMLHttpRequest cannot load
,那下面就來說明這是什麼,什麼是Same Origin Policy 同源政策。
XMLHttpRequest cannot load
http://odata.tn.edu.tw/ebookapi/api/getOdataJH/?level=all.
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘null’ is therefore not allowed access.
瀏覽器因為安全性的考量因此有 Same Origin Policy 同源政策
不同源 : 你的網站 != 呼叫API的網站
Request有發送出去,實際上Browser也有收到Response,但Browser因為Same Origin Policy所以沒將Response傳送給JavaScript
所以關鍵點在於Browser把Response阻擋下來了,因此沒有使用Browser就沒這個問題,那麼如果是使用Browser的話應該要怎麼辦?
CORS 跨來源HTTP請求
CORS = Cross-Origin HTTP request
開啟跨來源 HTTP 請求
Server 必須在 Response 的 Header 裡面加上Access-Control-Allow-Origin
Response流程
Response
-> Browser
-> Check "Access-Control-Allow-Origin"
如果裡面有包含現在這個發起 Request 的 Origin 的話,Browser就會允許通過,讓程式順利接收到 Response
# Response Header:
Content-Type: application/json
Content-Length: 71
Connection: keep-alive
Server: nginx
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, must-revalidate, private
Expires: 0
Pragma: no-cache
Twitch-Trace-Id: e316ddcf2fa38a659fa95af9012c9358
X-Ctxlog-Logid: 1-5920052c-446a91950e3abed21a360bd5
Timing-Allow-Origin: https://www.twitch.tv