名詞解釋

• Origin：同源策略指的是具有相同協(xié)議/域以及端口的資源；
• CORS：跨資源共享，Cross-Origin Resource Sharing；

跨域請(qǐng)求方案

• CORS：官方推薦的方案；
• HTML5 API：postMessage；
• Web Socket：完全拋棄HTTP協(xié)議；
• JSONP：不推薦使用；

CORS

跨資源共享允許Web服務(wù)器進(jìn)行跨源訪問(wèn)控制，以保障跨源數(shù)據(jù)的安全。

使用CORS的場(chǎng)景

• 使用XHR或者FetchAPI發(fā)起的HTTP請(qǐng)求；
• Web字體，調(diào)用@font-face字體使用到外部字體資源；
• 使用drawImage將Image/Video畫(huà)面繪制到canvas；
• WebGL貼圖；

CORS預(yù)檢請(qǐng)求

• 預(yù)檢目的：避免跨域請(qǐng)求對(duì)服務(wù)器用戶(hù)數(shù)據(jù)產(chǎn)生預(yù)料之外的影響；
• 實(shí)現(xiàn)方法：向服務(wù)器發(fā)送OPTIONS請(qǐng)求；

HTTP請(qǐng)求頭部字段

• Origin：預(yù)檢請(qǐng)求或者實(shí)際請(qǐng)求的源站；
• Access-Control-Request-Method：預(yù)檢請(qǐng)求中將實(shí)際請(qǐng)求的方法告訴服務(wù)器；
• Access-Control-Request-Headers：預(yù)檢請(qǐng)求中將實(shí)際請(qǐng)求的頭部告訴服務(wù)器；

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

HTTP響應(yīng)的頭部

• Access-Control-Allow-Origin：允許的源，不管預(yù)檢請(qǐng)求還是實(shí)際請(qǐng)求都需要此字段；
• Access-Control-Allow-Methods：允許的方法；
• Access-Control-Allow-Headers：允許的頭部；
• Access-Control-Expose-Headers：服務(wù)器把允許瀏覽器訪問(wèn)的頭放入白名單；
• Access-Control-Max-Age：該響應(yīng)的有效時(shí)間，在該時(shí)間內(nèi)無(wú)需再發(fā)預(yù)檢請(qǐng)求；

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

簡(jiǎn)單請(qǐng)求

不需要發(fā)起預(yù)檢的請(qǐng)求被稱(chēng)為簡(jiǎn)單請(qǐng)求。

簡(jiǎn)單請(qǐng)求必需滿(mǎn)足下面所有條件

• 請(qǐng)求方法必需三者之一：GET, POST, HEAD；
• Content-Type必需是三者一直：text/plain, multipart/form-data, application/x-www-form-urlencoded；
• 頭部相關(guān)：Accept, Accept-Language, Content-Type等；
• 文件相關(guān)：XMLHttpRequestUpload對(duì)象不能注冊(cè)監(jiān)聽(tīng)器以及沒(méi)有ReadableStream對(duì)象；