iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
自我挑戰組

菜鳥建立自信心系列 第 11

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

  • 分享至 

  • xImage
  •  

預檢請求(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端

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端

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


上一篇
CORS運作方式 - 簡單請求(Simple requests)
下一篇
Javascript - 邏輯運算
系列文
菜鳥建立自信心30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言