做過(guò) web 開(kāi)發(fā)的同學(xué)代虾，應(yīng)該都遇到過(guò)跨域的問(wèn)題谋减，當(dāng)我們從一個(gè)域名向另一個(gè)域名發(fā)送 Ajax 請(qǐng)求的時(shí)候灿意，打開(kāi)瀏覽器控制臺(tái)就會(huì)看到跨域錯(cuò)誤估灿，今天我們就來(lái)聊聊跨域的問(wèn)題。

1. 瀏覽器的同源策略

同源的定義是：如果兩個(gè)頁(yè)面的*協(xié)議脾歧，*端口（如果有指定）和*域名*都相同甲捏，則兩個(gè)頁(yè)面具有相同的源。同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互鞭执。這是一個(gè)用于隔離潛在惡意文件的重要安全機(jī)制司顿。

2. 跨域錯(cuò)誤信息產(chǎn)生的原因

為了說(shuō)明問(wèn)題芒粹，我們可以做如下實(shí)驗(yàn)，我們?cè)诒镜卮罱碎_(kāi)發(fā)環(huán)境大溜， 由客戶端?http://localhost:3001 向服務(wù)器http://localhost:3000 發(fā)送兩個(gè)請(qǐng)求化漆，一個(gè)使用 javascript 異步請(qǐng)求數(shù)據(jù)，另一個(gè)使用 img 標(biāo)簽請(qǐng)求數(shù)據(jù)钦奋，服務(wù)器收到請(qǐng)求后座云，打印接收到請(qǐng)求的日志，如下圖所示：

客戶端發(fā)送兩個(gè)請(qǐng)求

服務(wù)端打印日志并處理請(qǐng)求

代開(kāi)客戶端瀏覽器的控制臺(tái)付材，可以看到發(fā)出了兩個(gè)請(qǐng)求朦拖，并且都收到了狀態(tài)碼為 200 的響應(yīng)，同時(shí)控制臺(tái)報(bào)了一個(gè)錯(cuò)誤厌衔，即 xhr 請(qǐng)求報(bào)錯(cuò)璧帝。由此我們可以知道，之所以產(chǎn)生跨域錯(cuò)誤信息富寿，原因有以下三條：

瀏覽器端的限制（服務(wù)端收到了請(qǐng)求并正確返回）

發(fā)送的是 XMLHttpRequest 請(qǐng)求（使用 img 標(biāo)簽發(fā)送的請(qǐng)求為 json 類型睬隶，并不會(huì)報(bào)錯(cuò)）

請(qǐng)求了不同域的資源

只有同時(shí)滿足了這三個(gè)條件，瀏覽器才會(huì)產(chǎn)生跨域錯(cuò)誤页徐。

3. 解決跨域的思路

既然我們知道了跨域錯(cuò)誤產(chǎn)生的原因苏潜，那么解決思路就很直觀了，針對(duì)出錯(cuò)的三個(gè)原因進(jìn)行相應(yīng)的處理即可变勇，相應(yīng)的解決思路也有三個(gè)方向：

打破瀏覽器的限制

不發(fā)送 XHR 請(qǐng)求

解決跨域

下文將分別進(jìn)行闡述恤左。

3.1 打破瀏覽器的限制

由上面分析結(jié)論可知，之所以出現(xiàn)跨域的錯(cuò)誤搀绣，實(shí)際上是客戶端瀏覽器所做的限制赃梧，服務(wù)器并未進(jìn)行限制，因此我們可以通過(guò)設(shè)置瀏覽器豌熄，使其不進(jìn)行跨域檢查授嘀。實(shí)際上瀏覽器也提供了對(duì)應(yīng)的設(shè)置選項(xiàng)。

以 MacOS 下的 Chrome 瀏覽器為例锣险，在終端中使用命令

open?-n?/Applications/Google\?Chrome.app/?--args?--disable-web-security?--user-data-dir=/Users/your-computer-account/MyChromeDevUserData/

打開(kāi)瀏覽器蹄皱，即可禁用 Chrome 瀏覽器的安全檢查功能，同時(shí)也會(huì)禁用跨域安全檢查功能芯肤，這樣再次拿前面的例子進(jìn)行測(cè)試巷折，發(fā)現(xiàn)此時(shí)不會(huì)報(bào)錯(cuò)，同時(shí)也可以正確拿到服務(wù)端返回的數(shù)據(jù)崖咨。

禁用瀏覽器安全檢查功能

這種方式雖然可以實(shí)現(xiàn)跨域锻拘，但是需要每個(gè)用戶都對(duì)瀏覽器進(jìn)行設(shè)置，同時(shí)可能導(dǎo)致潛在的安全隱患，正常情況下不實(shí)用署拟。但這個(gè)例子充分說(shuō)明了婉宰，跨域錯(cuò)誤是前端瀏覽器所做的限制，與后臺(tái)服務(wù)無(wú)關(guān)推穷。

3.2 JSONP實(shí)現(xiàn)跨域

根據(jù)思路2心包，既然跨域問(wèn)題產(chǎn)生的原因是因?yàn)榭蛻舳税l(fā)送了 Ajax 請(qǐng)求，那么我們打破這個(gè)條件即可馒铃。具體實(shí)現(xiàn)方式就是使用 JSONP 來(lái)進(jìn)行跨域請(qǐng)求蟹腾。

JSONP，是?JSON?with?Padding?的簡(jiǎn)稱区宇，它是?json?的一種補(bǔ)充使用方式娃殖，利用?script?標(biāo)簽來(lái)解決跨域問(wèn)題。JSONP?是非官方協(xié)議议谷，他只是前后端一個(gè)約定珊随，如果請(qǐng)求參數(shù)帶有約定的參數(shù)，則后臺(tái)返回?javascript?代碼而非?json?數(shù)據(jù)柿隙，返回代碼是函數(shù)調(diào)用形式，函數(shù)名即約定值鲫凶，函數(shù)參數(shù)即要返回的數(shù)據(jù)禀崖。

JSONP 的實(shí)現(xiàn)原理如下圖所示：

JSONP實(shí)現(xiàn)原理

首先在客戶端 js 中定義一個(gè)函數(shù)（假設(shè)名為 handler），然后動(dòng)態(tài)創(chuàng)建一個(gè) script 標(biāo)簽插入頁(yè)面中螟炫，script 標(biāo)簽的 src 屬性即要調(diào)用的地址波附，同時(shí)，在調(diào)用的 url 中加入一個(gè)服務(wù)端約定的參數(shù)（假設(shè)名為 callback昼钻，參數(shù)值為已定義的函數(shù)名 handler）掸屡，服務(wù)端收到請(qǐng)求，如果發(fā)現(xiàn)請(qǐng)求的 url 中帶有約定的參數(shù)然评，那么就返回一段函數(shù)調(diào)用形式的 javascript 代碼仅财，該段代碼的函數(shù)名即為 callback 參數(shù)的值 handler，函數(shù)的參數(shù)即為待返回的數(shù)據(jù)碗淌。這樣盏求，客戶端拿到返回結(jié)果后就會(huì)執(zhí)行 handler 函數(shù)酷麦，對(duì)返回的數(shù)據(jù)進(jìn)行處理蝌矛。

我們使用 jquery 向服務(wù)端發(fā)送一個(gè) JSONP 格式的請(qǐng)求，從瀏覽器控制臺(tái)可以看到請(qǐng)求和對(duì)應(yīng)的響應(yīng)锅棕，如下圖所示：

JSONP請(qǐng)求

JSONP請(qǐng)求的響應(yīng)

由上圖可以看到纳像，發(fā)送JSONP請(qǐng)求時(shí)荆烈，請(qǐng)求的 Type 為 script 類型而非 xhr 類型，這樣就打破了跨域報(bào)錯(cuò)的三個(gè)必要條件竟趾，不會(huì)產(chǎn)生跨域錯(cuò)誤憔购，同時(shí)也驗(yàn)證了服務(wù)端返回的數(shù)據(jù)格式為 javascript 代碼調(diào)用的形式宫峦，其中 Jquery{{331045:0}}** 這一長(zhǎng)串函數(shù)名是 jquery 自動(dòng)生成的。

由于 JSONP 的原理是使用 script 標(biāo)簽來(lái)加載數(shù)據(jù)倦始，所以它的兼容性很好斗遏，但是使用 JSONP 來(lái)解決跨域問(wèn)題存在以下缺陷：

只能發(fā)送 GET 請(qǐng)求

發(fā)送的不是 XHR 請(qǐng)求，這樣導(dǎo)致 XHR 請(qǐng)求中的很多事件都無(wú)法進(jìn)行處理

服務(wù)端需要改動(dòng)

3.3 跨域資源共享CORS

CORS 是一個(gè) W3C 標(biāo)準(zhǔn)鞋邑，全稱是"跨域資源共享"（Cross-origin resource sharing）诵次。它允許瀏覽器向跨源服務(wù)器，發(fā)出 XMLHttpRequest 請(qǐng)求枚碗，從而克服了 AJAX 只能同源使用的限制逾一。CORS 基于 http 協(xié)議關(guān)于跨域方面的規(guī)定，使用時(shí)肮雨，客戶端瀏覽器直接異步請(qǐng)求被調(diào)用端服務(wù)端遵堵，在響應(yīng)頭增加響應(yīng)的字段，告訴瀏覽器后臺(tái)允許跨域怨规。

跨域錯(cuò)誤

回到文章開(kāi)始的這個(gè)跨域錯(cuò)誤信息陌宿，可以看到錯(cuò)誤的具體信息是：服務(wù)端沒(méi)有設(shè)置Access-Control-Allow-Origin 這個(gè)響應(yīng)頭從而導(dǎo)致報(bào)錯(cuò)，通過(guò)設(shè)置 Access-Control-Allow-Origin: * 這個(gè)響應(yīng)頭波丰，我們可以解決問(wèn)題壳坪。但是，這種設(shè)置能滿足所有情況嗎掰烟？ 更進(jìn)一步爽蝴，使用 CORS 時(shí)瀏覽器如何檢查跨域錯(cuò)誤？ 前面我們有講到纫骑，雖然瀏覽器報(bào)錯(cuò)蝎亚，但是在這之前服務(wù)端已經(jīng)接受了請(qǐng)求，那么先馆，瀏覽器總是先發(fā)出請(qǐng)求后再進(jìn)行判斷嗎发框？下面我們一一討論。

3.3.1 瀏覽器如何檢查跨域錯(cuò)誤

瀏覽器檢查跨域錯(cuò)誤的基本原理是：

瀏覽器檢測(cè)到?ajax?請(qǐng)求的域與當(dāng)前域不一致煤墙，會(huì)在請(qǐng)求頭中增加?Origin?字段缤底，然后檢查服務(wù)端響應(yīng)頭?Access-Control-Allow-Origin，如果不存在或不匹配番捂，則報(bào)跨域錯(cuò)誤个唧。

瀏覽器檢查跨域錯(cuò)誤原理

3.3.2 瀏覽器總是先發(fā)出請(qǐng)求，然后根據(jù)是否有 Access-Control-Allow-Origin 響應(yīng)頭來(lái)判斷嗎

答案是设预，對(duì)于簡(jiǎn)單請(qǐng)求徙歼，是；而對(duì)于非簡(jiǎn)單請(qǐng)求，不是魄梯。非簡(jiǎn)單請(qǐng)求的情況下桨螺，瀏覽器并不是直接請(qǐng)求所需資源，而是會(huì)先發(fā)出一個(gè)預(yù)檢請(qǐng)求酿秸，預(yù)檢請(qǐng)求通過(guò)后才會(huì)對(duì)所需資源進(jìn)行請(qǐng)求灭翔。

非簡(jiǎn)單請(qǐng)求預(yù)檢請(qǐng)求

這里涉及到的簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求的概念，那么簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求有什么區(qū)別呢辣苏？MDN 對(duì)非簡(jiǎn)單請(qǐng)求進(jìn)行了定義肝箱，滿足下列條件之一，即為非簡(jiǎn)單請(qǐng)求：

使用了下列 HTTP 方法：PUT稀蟋、DELETE煌张、CONNECT、OPTIONS退客、TRACE骏融、PATCH

使用了除以下首部之外的其他首部：Accept、Accept-Language萌狂、Content-Language档玻、Content-Type

Content-Type首部的值不屬于下列其中一個(gè)： application/x-www-form-urlencoded、 multipart/form-data茫藏、 text/plain

請(qǐng)求中的 XMLHttpRequestUpload 對(duì)象注冊(cè)了任意多個(gè)事件監(jiān)聽(tīng)器

請(qǐng)求中使用了ReadableStream對(duì)象

簡(jiǎn)單來(lái)說(shuō)误趴，除了我們平時(shí)使用最多的 GET 和 POST 方法，以及最常使用的 Accept刷允、Accept-Language、Content-Language 和 類型為 application/x-www-form-urlencoded碧囊、 multipart/form-data树灶、 text/plain 的 Content-Type 請(qǐng)求頭，其他基本都是非簡(jiǎn)單請(qǐng)求糯而。對(duì)于這些非簡(jiǎn)單請(qǐng)求天通，瀏覽器會(huì)發(fā)出兩個(gè)請(qǐng)求，第一個(gè)為 OPTIONS 遇見(jiàn)請(qǐng)求熄驼，遇見(jiàn)請(qǐng)求的響應(yīng)檢查通過(guò)后才會(huì)發(fā)出對(duì)資源的請(qǐng)求像寒。

非簡(jiǎn)單請(qǐng)求過(guò)程

生產(chǎn)環(huán)境下，如果需要發(fā)送非簡(jiǎn)單跨域請(qǐng)求瓜贾，每次兩個(gè)請(qǐng)求會(huì)增加響應(yīng)時(shí)間诺祸，為此，W3C 標(biāo)準(zhǔn)中增加了另一個(gè)響應(yīng)頭 Access-Control-Max-Age 參數(shù)祭芦，該響應(yīng)頭表明了對(duì)于非簡(jiǎn)單請(qǐng)求的預(yù)檢請(qǐng)求瀏覽器的緩存時(shí)間筷笨，在緩存有效期內(nèi)，非簡(jiǎn)單請(qǐng)求可以不發(fā)送預(yù)檢請(qǐng)求，另外胃夏，實(shí)際開(kāi)發(fā)中轴或，可以在服務(wù)端設(shè)置接收到的請(qǐng)求方法是 OPTIONS 時(shí)，直接返回 200仰禀，這樣也能加快響應(yīng)照雁。

3.3.3 設(shè)置 Access-Control-Allow-Origin: * 就行嗎

帶cookie的跨域

當(dāng)我們需要發(fā)送帶 cookie 的請(qǐng)求時(shí)，Access-Control-Allow-Origin 直接設(shè)置為通配符 * 時(shí)是無(wú)法通過(guò)瀏覽器的檢查的答恶，此時(shí)該響應(yīng)頭的值必須與發(fā)出請(qǐng)求的域完全匹配才行饺蚊，另外，還需要設(shè)置 Access-Control-Allow-Credentials 響應(yīng)頭的值為 true亥宿，表示支持帶 cookie 的跨域請(qǐng)求卸勺。

3.3.4 CORS請(qǐng)求頭和響應(yīng)頭總結(jié)

請(qǐng)求頭：

Origin： 瀏覽器發(fā)出 Ajax 跨域請(qǐng)求之前會(huì)添加此頭部，值為發(fā)送請(qǐng)求的域

Access-Control-Request-Method：使用了除 GET烫扼、POST 請(qǐng)求方法之外的方法曙求，瀏覽器會(huì)添加此頭部，值為當(dāng)前請(qǐng)求方法

Access-Control-Request-Headers：使用了自定義頭部或除了Accept映企、Accept-Language悟狱、Content-Language、Content-Type 之外的頭部堰氓，瀏覽器會(huì)添加此頭部挤渐，值為當(dāng)前的請(qǐng)求方法

響應(yīng)頭：

Access-Control-Allow-Origin： 表示服務(wù)端允許哪些域請(qǐng)求資源

Access-Control-Allow-Methods： 當(dāng)客戶端包含 Access-Control-Request-Method 請(qǐng)求頭時(shí)，服務(wù)端需要響應(yīng)該頭部双絮，值通常由 Reauest 的 header 中 Access-Control-Request-Method 取得

Access-Control-Allow-Headers： 當(dāng)客戶端包含 Access-Control-Request-Headers 請(qǐng)求頭時(shí)浴麻，服務(wù)端需要響應(yīng)該頭部，值通常由 Reauest 的 header 中 Access-Control-Request-Headers 取得

Access-Control-Expose-Headers： 指出客戶端通過(guò) XHR 對(duì)象的 getResponseHeaders 方法可以獲取的響應(yīng)頭有哪些

Access-Control-Allow-Credentials： 允許帶 cookie 的跨域請(qǐng)求

Access-Control-Max-Age： 預(yù)檢請(qǐng)求的緩存時(shí)間

4. 總結(jié)

本文介紹了跨域的原因囤攀，重點(diǎn)介紹了使用 JSONP 和 CORS 解決跨域問(wèn)題的方法软免。除此之外，實(shí)際開(kāi)發(fā)中還其他各種解決跨域問(wèn)題的思路焚挠，本質(zhì)上膏萧，這些方法都是打破跨域錯(cuò)誤的三個(gè)條件，大家可以自行查資料了解一下蝌衔。

原文：https://segmentfault.com/a/1190000017553835

最后：“相信有很多想學(xué)前端的小伙伴榛泛，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理噩斟，送給每一位前端小伙伴曹锨，53763，1707這里是小白聚集地剃允，歡迎初學(xué)和進(jìn)階中的小伙伴艘希∨鹕恚”

最后祝大家早日學(xué)有所成，拿到滿意offer覆享，快速升職加薪佳遂，走上人生巔峰。