面試官問我CORS跨域，我直接一套操做斬殺！

前言

咱們都知道因爲同源策略的存在,致使咱們在跨域請求數據的時候很是的麻煩。首先阻擋咱們的所謂同源究竟是什麼呢?，所謂同源就是瀏覽器的一個安全機制,不一樣源的客戶端腳本沒有在明確受權的狀況下,不能讀寫對方資源。因爲存在同源策略的限制,而又有須要跨域的業務,因此就有了CORS的出現。javascript

咱們都知道,jsonp也能夠跨域,那爲何還要使用CORS呢html

jsonp只可使用 GET 方式提交
很差調試,在調用失敗的時候不會返回任何狀態碼
安全性,萬一假如提供jsonp的服務存在頁面注入漏洞，即它返回的javascript的內容被人控制的。那麼結果是什麼？全部調用這個jsonp的網站都會存在漏洞。因而沒法把危險控制在一個域名下…因此在使用jsonp的時候必需要保證使用的jsonp服務必須是安全可信的。

開始CORS

CORS是一個W3C標準,全稱是"跨域資源共享"（Cross-origin resource sharing），他容許瀏覽器向跨源服務器發送XMLHttpRequest請求，從而克服啦 AJAX 只能同源使用的限制前端

CORS須要瀏覽器和服務器同時支持，整個 CORS通訊過程，都是瀏覽器自動完成不須要用戶參與，對於開發者來講，CORS的代碼和正常的 ajax 沒有什麼差異，瀏覽器一旦發現跨域請求，就會添加一些附加的頭信息，java

CORS這麼好嗎，難道就沒有缺點嘛？git

答案確定是NO，目前全部最新瀏覽器都支持該功能，可是萬惡的IE不能低於10github

簡單請求和非簡單請求ajax

瀏覽器將CORS請求分紅兩類：簡單請求和非簡單請求npm

簡單請求

凡是同時知足如下兩種狀況的就是簡單請求，反之則非簡單請求，瀏覽器對這兩種請求的處理不同json

請求方法是如下方三種方法之一
- HEAD
- GET
- POST
HTTP的頭信息不超出如下幾種字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限於三個值 application/x-www-form-urlencoded、multipart/form-data、text/plain

對於簡單請求來講，瀏覽器之間發送CORS請求，具體來講就是在頭信息中，增長一個origin字段，來看一下例子api

GET /cors? HTTP/1.1
Host: localhost:2333
Connection: keep-alive
Origin: http://localhost:2332
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Accept: */* Referer: http://localhost:2332/CORS.html Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 If-None-Match: W/"1-NWoZK3kTsExUV00Ywo1G5jlUKKs" 複製代碼

上面的頭信息中，Origin字段用來講名本次請求來自哪一個源,服務器根據這個值,決定是否贊成此次請求。

若是Origin指定的源不在容許範圍以內,服務器就會返回一個正常的HTTP迴應,而後瀏覽器發現頭信息中沒有包含Access-Control-Allow-Origin 字段,就知道出錯啦,而後拋出錯誤,反之則會出現這個字段(實例以下)

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
複製代碼

Access-Control-Allow-Origin 這個字段是必須的,表示接受那些域名的請求(*爲全部)
Access-Control-Allow-Credentials 該字段可選, 表示是否能夠發送cookie
Access-Control-Expose-Headers 該字段可選,XHMHttpRequest對象的方法只可以拿到六種字段: Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma ,若是想拿到其餘的須要使用該字段指定。

若是你想要連帶Cookie一塊兒發送,是須要服務端和客戶端配合的

// 服務端
Access-Control-Allow-Credentials: true
// 客戶端
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
// 可是若是省略withCredentials屬性的設置,有的瀏覽器仍是會發送cookie的
xhr.withCredentials = false;
複製代碼

非簡單請求

非簡單請求則是不知足上邊的兩種狀況之一,好比請求的方式爲 PUT,或者請求頭包含其餘的字段

非簡單請求的CORS請求是會在正式通訊以前進行一次預檢請求

瀏覽器先詢問服務器,當前網頁所在的域名是否能夠請求您的服務器,以及可使用那些HTTP動詞和頭信息,只有獲得正確的答覆,纔會進行正式的請求

// 前端代碼
var url = 'http://localhost:2333/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
複製代碼

因爲上面的代碼使用的是 PUT 方法,而且發送了一個自定義頭信息.因此是一個非簡單請求,當瀏覽器發現這是一個非簡單請求的時候,會自動發出預檢請求,看看服務器可不能夠接收這種請求,下面是"預檢"的 HTTP 頭信息

OPTIONS /cors HTTP/1.1
Origin: localhost:2333
Access-Control-Request-Method: PUT // 表示使用的什麼HTTP請求方法
Access-Control-Request-Headers: X-Custom-Header // 表示瀏覽器發送的自定義字段
Host: localhost:2332
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
User-Agent: Mozilla/5.0...
複製代碼

"預檢"使用的請求方法是 OPTIONS , 表示這個請求使用來詢問的,

預檢請求後的迴應，服務器收到"預檢"請求之後，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段之後，確認容許跨源請求，就能夠作出迴應。

預檢的響應頭:

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://localhost:2332 // 表示http://localhost:2332能夠訪問數據
Access-Control-Allow-Methods: GET, POST, PUT      
Access-Control-Allow-Headers: X-Custom-Header    
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
複製代碼

若是瀏覽器否認了"預檢"請求,會返回一個正常的HTTP迴應,可是沒有任何CORS的頭相關信息,這是瀏覽器就認定,服務器不容許這次訪問,從而拋出錯誤

預檢以後的請求

當預檢請求經過以後發出正經的HTTP請求,還有一個就是一旦經過了預檢請求就會,請求的時候就會跟簡單請求,會有一個Origin頭信息字段。

經過預檢以後的,瀏覽器發出發請求

PUT /cors HTTP/1.1
Origin: http://api.bob.com // 經過預檢以後的請求,會自動帶上Origin字段
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
複製代碼

感謝

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期推薦

《什麼場景下使用Render函數，如何配置JSX》

《分享15個Webpack實用的插件！！！》

《手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用》

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》