RFC-6454 Same Origin Policy介紹

  1. CORS 跨來源HTTP請求
    1. 開啟跨來源 HTTP 請求
    2. Response流程

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

參考來源
http://huli.logdown.com/posts/2223581-ajax-and-cors