CORS運作方式 預檢請求(Preflight Request)

發表於 分類於

預檢請求(Preflight Request)
如果發出的請求不是簡單請求(不符合簡單請求的條件，譬如HTTP方法是PUT、DELETE)
跨站請求可能會攜帶使用者資料，這時候CORS會要求，必須進行預檢請求。

  • 預檢請求第一步
    https://ithelp.ithome.com.tw/upload/images/20230927/20162681c99HlUohIX.png
    可以想像成事先向Server端知會，等一下有個簡單請求，讓Server端看看

  • 預檢請求第二步
    https://ithelp.ithome.com.tw/upload/images/20230927/20162681VK9ChrBDNq.png
    如果Server端接受了
    這時候!!
    瀏覽器才會送出真正的請求，如上圖
    這個發出的請求，方法是POST
    接著，Server端給一個回應(response)，接受http://foo.example的跨域請求
    Access-Control-Allow-Origin: http://foo.example

Client端

1
2
3
4
5
6
7
8
9
10
11
OPTIONS /resources/post-here/ 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
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

第一行說明方法是OPTIONS，OPTIONS 是一個 HTTP/1.1 方法，這個方法用來確認來自伺服器進一步的資訊
最底下2行告訴Server端，實際要送出的請求是POST，Headers是X-PINGOTHER

Server端

1
2
3
4
5
6
7
8
9
10
11
12
13
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Vary: Accept-Encoding, Origin
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

Server回傳的response
接受http://foo.example的跨域請求
接受的方法是POST, GET, OPTIONS
接受的header是X-PINGOTHER