這篇文章我們聊一聊CORS跨域，它的全稱是"跨域資源共享"（Cross-origin resource sharing）。
在之前的文章中我們已經(jīng)詳細(xì)介紹了如何使用JSONP進(jìn)行接口跨域請(qǐng)求，如果不了解的可以參考作者之前的文章《詳解前端jquery中的JSONP如何實(shí)現(xiàn)跨域請(qǐng)求》，相信一定難不倒聰明的你。
那么CORS跨域方案和jsonp跨域有何不同呢？讀完這篇文章你肯定能找到答案！
跨域案例
頁(yè)面地址：http://client.cors.com:8000/greeter.html，代碼如下：
圖1
服務(wù)器接口地址：http://server.cors.com:3000/data，服務(wù)器代碼如下：
圖2
很明顯，當(dāng)頁(yè)面在請(qǐng)求服務(wù)器接口時(shí)會(huì)發(fā)生跨域現(xiàn)象，如下：
圖3
我們?nèi)g覽器Network中看一下請(qǐng)求信息，
圖4
如圖4所示，響應(yīng)為200，response Headers信息也很正常，這說(shuō)明在跨域的情況下請(qǐng)求依然可以到達(dá)服務(wù)器，并且服務(wù)器能夠正常響應(yīng)，但是由于瀏覽器的同源策略并沒(méi)有把返回的數(shù)據(jù)給到頁(yè)面。
那么如何讓頁(yè)面在跨域的情況下獲取到數(shù)據(jù)呢？我們回看圖3，似乎在說(shuō)少了一個(gè)Access-Control-Allow-Origin頭，那么我們?cè)诜?wù)器代碼中加一下。
圖5
現(xiàn)在刷新頁(yè)面，服務(wù)器返回的數(shù)據(jù)就能正常打印出來(lái)了。
'Access-Control-Allow-Origin': '*'表示接受任意域名的請(qǐng)求
攜帶憑證
在跨域的情況，服務(wù)器有時(shí)依然需要鑒權(quán)。通常服務(wù)器鑒權(quán)都是從cookie中獲取信息來(lái)判斷客戶端的身份，那么跨域的情況下請(qǐng)求還能傳遞cookie嗎？當(dāng)然能，但是cookie會(huì)遵守同源策略！
1）服務(wù)器設(shè)置cookie
圖6
圖7
如果需要服務(wù)器設(shè)置cookie，必須設(shè)置Access-Control-Allow-Credentials: true，否則會(huì)出現(xiàn)如下錯(cuò)誤。
圖8
頁(yè)面中的xhr對(duì)象也必須設(shè)置屬性withCredentials=true。
此時(shí)刷新頁(yè)面，在頁(yè)面控制臺(tái)中通過(guò)document.cookie查看server=123，你會(huì)發(fā)現(xiàn)server端設(shè)置的cookie并不存在。上面已經(jīng)說(shuō)了cookie會(huì)遵循同源策略，服務(wù)器的域名是server.cors.com，所以服務(wù)器設(shè)置的cookie應(yīng)該是在這個(gè)域名下，并不會(huì)在頁(yè)面的域名（client.cors.com）下，那如何驗(yàn)證服務(wù)器設(shè)置cookie成功呢？
圖9
- 先打開(kāi)接口頁(yè)面，這個(gè)頁(yè)面是同源的；
- 回到請(qǐng)求頁(yè)面，刷新；
- 再回到接口頁(yè)面，在控制臺(tái)通過(guò)document.cookie就可以拿到服務(wù)器設(shè)置的cookie。
2）頁(yè)面設(shè)置cookie
如果主域名相同，比如現(xiàn)在的例子，主域名都是cors.com，那么就可以把cookie設(shè)置在這個(gè)主域名下。
document.cookie="client=1;domain=cors.com;"
這樣服務(wù)器就能獲取到頁(yè)面設(shè)置的cookie。
如果連主域名都不一樣，那就不要妄想在頁(yè)面上設(shè)置cookie讓服務(wù)器獲取到。這種情況下，服務(wù)器該如何鑒權(quán)呢？
第一種方式是讓后端把跨域的接口代理成同域的，這樣我們的后端可以拿到cookie，在他那把cookie轉(zhuǎn)發(fā)給跨域服務(wù)。
圖10
第二種方式是頁(yè)面發(fā)送請(qǐng)求時(shí)在header中附加一個(gè)token，用于鑒權(quán)，
圖11
當(dāng)刷新頁(yè)面時(shí)，頁(yè)面控制臺(tái)又報(bào)錯(cuò)了。
圖12
提示設(shè)置Access-Control-Allow-Headers，那我們就設(shè)置一下。
圖13
再刷新頁(yè)面，請(qǐng)求正常了，服務(wù)端也能拿到token的值了。
簡(jiǎn)單請(qǐng)求與非簡(jiǎn)單請(qǐng)求
圖13中我們拿到了token的值，此時(shí)我們?cè)偃デ魄茷g覽器中的Network，會(huì)發(fā)現(xiàn)頁(yè)面發(fā)送了兩個(gè)請(qǐng)求，第一個(gè)請(qǐng)求的method是OPTIONS，這是怎么回事呢？
圖14
原來(lái)cors跨域也分簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。
簡(jiǎn)單請(qǐng)求條件如下：
- 請(qǐng)求方法是必須是HEAD/GET/POST三種方法之一；
- HTTP的頭信息不超出這幾種字段：Accept/Accept-Language/Content-Language/Content-Language/Last-Event-ID/Content-Type，Content-Type只限于三個(gè)值A(chǔ)pplication/x-www-form-urlencoded、multipart/form-data、text/plain。
圖11中我們?cè)O(shè)置了token請(qǐng)求頭，顯然不滿足以上條件，所以是非簡(jiǎn)單請(qǐng)求。非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求會(huì)在正式通信之前增加一次HTTP查詢請(qǐng)求，稱為預(yù)檢請(qǐng)求（preflight）。瀏覽器先詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。預(yù)檢請(qǐng)求用的請(qǐng)求方法是OPTIONS，表示這個(gè)請(qǐng)求是用來(lái)詢問(wèn)的。
我們現(xiàn)在嘗試發(fā)送一次PUT請(qǐng)求，看看會(huì)有什么現(xiàn)象？
圖15
不出所料，瀏覽器再次報(bào)錯(cuò)！
圖16
提示我們?cè)O(shè)置Access-Control-Allow-Methods，那就只能設(shè)置了！
圖17
再次刷新頁(yè)面，現(xiàn)在請(qǐng)求正常了！我們回頭看一下預(yù)檢請(qǐng)求，
圖18
不得不說(shuō)，瀏覽器在訪問(wèn)跨域接口時(shí)真的是非常的小心，當(dāng)然這一切都是為了安全考慮。即使這樣，現(xiàn)在網(wǎng)絡(luò)中也不乏XSS、CSRF等攻擊。
總結(jié)
17年夏天作者去頭條面試，當(dāng)時(shí)筆試有這么一道題“如果瀏覽器請(qǐng)求跨域，那么這個(gè)請(qǐng)求還能到達(dá)服務(wù)器嗎？如果能，服務(wù)器會(huì)返回什么？”。如果你讀完本文，并且能充分理解，我相信這道題肯定不在話下?？缬蛟跇I(yè)務(wù)中經(jīng)常遇到，大部分后端同學(xué)并不知道什么叫跨域，更不清楚該如何解決。作為前端的你，這時(shí)候就可以大顯身手了！
喜歡我的文章就關(guān)注我吧，有問(wèn)題可以發(fā)表評(píng)論，我們一起學(xué)習(xí)，共同成長(zhǎng)！
