CORS運作方式 簡單請求(Simple requests)

發表於 更新於 分類於

知道同源的觀念之後
CORS主要是為了安全性而存在的保護機制
那如果不同源，要怎麼讓網頁應用存取不同源的伺服器Server的資源??

我們可以透過CORS機制的以下3種方式去達成
1. 簡單請求(Simple Request)
2. 預檢請求(Preflight Request)
3. 附帶身分驗證的請求(Credentialed)

來介紹簡單請求

  • 方法method只有3種:
    GET、HEAD、POST

  • 標頭header:
    除了user-agent自動設定的標頭以外
    Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID、DPR、Save-Data、Viewport-Width、Width

  • Content-Type只允許:
    application/x-www-form-urlencoded、
    multipart/form-data、
    text/plain

  • 發出請求的物件沒有註冊事件監聽器

  • 請求中沒有 ReadableStream物件被用於上傳

簡單請求，實際上怎麼運作呢?
分2個部分:客戶端Client以及伺服器端Server

Client:向Server發出的簡單請求，標頭必須告訴大家Origin是哪一個網域(domain)

Server:接到簡單請求之後，如果Server同意，發回來的回應response，回應中的標頭header，會有Access-Control-Allow-Origin: * 星號意思是允許所有網站來訪問我
如果沒有以上這一行
這個簡單請求就會失敗了
https://ithelp.ithome.com.tw/upload/images/20230925/20162681Cu8ADQday8.png

一起來看看詳細的內容
如果http://foo.example 網域上的網頁內容想要呼叫 http://bar.other 網域內的內容

http://foo.example 會發起簡單請求，在Origin的地方會註明http://foo.example
方法是GET

1
2
3
4
5
6
7
8
9
10
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example

Server會怎麼回應呢?

Access-Control-Allow-Origin: http://foo.example
這代表Server允許http://foo.example 這網域來訪問

1
2
3
4
5
6
7
8
9
10
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: http://foo.example
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[XML Data]

請參考mdn文件
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS