出去溜達了一圈面試，發(fā)現(xiàn)很多公司愛問CORS技術(shù)庆冕，辣mo~這一節(jié)我們來研究下CORS吧 ~
什么是跨域康吵？
一個url地址的組成:協(xié)議，域名访递，端口號涎才，如果這幾個因素任意一個不相同的情況，都屬于不同的域力九。不同的域之間的請求，就叫做“跨域”邑闺。
跨域的存在原因跌前，是因為瀏覽器的“同源策略”。同源策略的存在可以保護用戶隱私信息陡舅，防止身份偽造等抵乓。只有相同的域名，協(xié)議，端口號才能夠正常通信灾炭。
值得注意的是茎芋，跨域并不是請求發(fā)不出去，而是服務(wù)端能接收到請求并且返回數(shù)據(jù)結(jié)果蜈出，這個數(shù)據(jù)結(jié)果被瀏覽器攔截了田弥。
跨域的解決方式有哪些？
老生常談铡原，面試常問的問題偷厦，JSONP,CORS,postmessage，iframe燕刻，nginx代理巴拉巴拉順扣就能說出來的答案只泼，但是實際運用上呢？
這里先提JSONP,CORS兩種卵洗，其他的后續(xù)補充 ~
1请唱、JSONP
簡單來說，jsonp是帶有回調(diào)函數(shù)callback的json过蹂，但是它的局限性在于十绑，JSONP只能實現(xiàn)GET請求。jsonp需要通過script標簽引入(script標簽是不受同源策略限制的)榴啸。
<script type='text/javascript'>
function getSomething(data){
//dosomething
}
</script>
<script src='http:xxx/xx/xx.js?callback=getSomething'></script>
獲取數(shù)據(jù)的地址后面跟著callback參數(shù)孽惰，這個參數(shù)名一般是跟后端協(xié)商格式得到的，返回后調(diào)用callback函數(shù)鸥印。
jsonp優(yōu)缺點
優(yōu)點：兼容性好勋功，可以在更古老的瀏覽器中運行，請求完畢之后通過調(diào)用callback函數(shù)獲取結(jié)果库说。
缺點：只能支持GET請求狂鞋。
在CORS標準之前，jsonp請求只能僅限于GET請求潜的，直到CORS標準出來骚揍，市場上大部分的瀏覽器都支持CORS。
2啰挪、CORS
支持CORS請求的瀏覽器一旦發(fā)現(xiàn)請求跨域信不，會對請求進行一些特殊處理，實現(xiàn)了CORS的服務(wù)器亡呵，接受請求抽活，并且做出響應(yīng)。
客戶端不需要對跨域請求做任何特殊處理锰什。實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器下硕，只要服務(wù)器實現(xiàn)了CORS接口丁逝，就可以跨源通信。
瀏覽器將跨域請求分為簡單請求和非簡單請求梭姓。
簡單請求滿足以下條件：
(1)霜幼、請求方式是：HEAD GET POST
(2)、HTTP頭信息不超過以下字段：
Accept 誉尖、 Accept-Language罪既、Content-Language、
Content-Type：application/x-www-form-urlencoded释牺、 multipart/form-data萝衩、text/plain
簡單請求
瀏覽器判定該請求為簡單請求的時候，會在request頭部添加origin(協(xié)議+域名+端口)字段没咙，表示我們的請求源猩谊，CORS會將該字段作為跨域標識。
CORS接收到請求后祭刚，會判斷Origin是否在允許的源范圍內(nèi)牌捷，如果是在范圍內(nèi)的，則服務(wù)端會在響應(yīng)頭部添加Access-Control-Allow-Origin涡驮、Access-Control-Allow-Credentials等字段暗甥。如果不在范圍內(nèi)，響應(yīng)頭沒有包含Access-Control-Allow-Origin捉捅，瀏覽器會拋出“同源檢測異吵贩溃”。
Access-Control-Allow-Origin：該字段是必須棒口。如果值是“ * ”寄月，表示接受任意域名的請求，不過出于服務(wù)器安全考慮无牵，一般都不會設(shè)置為*漾肮。Access-Control-Allow-Origin也可以返回允許訪問的源，如果在允許范文源的范圍內(nèi)茎毁，則瀏覽器不會攔截請求響應(yīng)克懊。
Access-Control-Allow-Credentials:該字段可選。表示是否允許發(fā)送cookie七蜘，這個值只能設(shè)置為true谭溉，否則不要添加該字段。并且橡卤，當Access-Control-Allow-Origin設(shè)置為*夜只，該字段就算設(shè)置為true，出于安全考慮蒜魄，是不會發(fā)送cookie扔亥。
Access-Control-Expose-Headers:該字段可選。該字段是一個逗號分隔開的字符串谈为，指定瀏覽器CORS請求會額外發(fā)送的頭部字段旅挤。
這里需要注意的是，即時服務(wù)器同意發(fā)送cookie伞鲫，如果瀏覽器沒設(shè)置粘茄，也不會發(fā)送cookie的，開發(fā)者需要設(shè)置withCredentials為true秕脓，將請求帶上cookie
非簡單請求
對服務(wù)器有特殊要求的請求柒瓣，在正式通信之前，會增加一次HTTP查詢請求吠架，稱之“預(yù)檢查請求”芙贫。瀏覽器先詢問服務(wù)器，當前網(wǎng)頁域名是否在可允許訪問的范圍內(nèi)傍药，以及可以使用哪些頭部信息字段磺平，狀態(tài)碼為204，只有當預(yù)檢通過了拐辽，瀏覽器才會發(fā)出正式請求拣挪，這時候才會返回200。
“預(yù)檢”請求用的方法就是OPTIONS俱诸，表示這個請求是用來詢問菠劝。頭部的Origin用來標識請求源。一旦服務(wù)器通過“預(yù)檢”請求睁搭，以后每次瀏覽器正常的CORS請求赶诊，都會有一個Origin頭字段，服務(wù)器回應(yīng)也會有一個Access-Control-Allow-Origin頭部字段介袜。
寫在最后
CORS比JSONP更強大甫何，JSONP只支持GET請求，但是兼容性強大遇伞，CORS可以支持所有http請求辙喂。
