預檢請求(Preflight Request)
如果發出的請求不是簡單請求(不符合簡單請求的條件,譬如HTTP方法是PUT、DELETE)
跨站請求可能會攜帶使用者資料,這時候CORS會要求,必須進行預檢請求。
預檢請求第一步
可以想像成事先向Server端知會,等一下有個簡單請求,讓Server端看看
預檢請求第二步
如果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