目前很多應(yīng)用開發(fā)都是多客戶端的峻厚，前端調(diào)用后端提供的 API 來獲取數(shù)據(jù)杆烁，很多都是前后端分離的架構(gòu)，但這樣相比之前的單應(yīng)用系統(tǒng)會帶來跨域的問題癣丧。
本文配套的代碼地址：https://github.com/weizhiwen/cross-domain
0捍壤、什么是跨域問題
前端調(diào)用的后端接口不屬于同一個(gè)域（域名或端口不同）骤视，就會產(chǎn)生跨域問題，也就是說你的應(yīng)用訪問了該應(yīng)用域名或端口之外的域名或端口鹃觉。
1专酗、為什么會發(fā)生跨域問題
要同時(shí)滿足三個(gè)條件才會產(chǎn)生跨域問題，這也就是為什么會產(chǎn)生跨域的原因盗扇。
- 1祷肯、瀏覽器限制，而不是服務(wù)端限制疗隶，可以查看Network佑笋，請求能夠正確響應(yīng)，response返回的值也是正確的
- 2斑鼻、請求地址的域名或端口和當(dāng)前訪問的域名或端口不一樣
- 3蒋纬、發(fā)送的是XHR（XMLHttpRequest）請求，可以使用 a 標(biāo)簽（模擬xhr請求）和 img 標(biāo)簽（模擬json請求）做對比（控制臺只報(bào)了一個(gè)跨域異常）
關(guān)于 XMLHTTPRequest 可以參看這篇文章 《你真的會使用XMLHttpRequest嗎卵沉？》
2、解決跨域問題的三種思路
- 1法牲、客戶端瀏覽器解除跨域限制（理論上可以但是不現(xiàn)實(shí)）
- 2史汗、發(fā)送JSONP請求替代XHR請求（并不能適用所有的請求方式，不推薦）
- 3拒垃、修改服務(wù)器端（包括HTTP服務(wù)器和應(yīng)用服務(wù)器）（推薦）
2.1 客戶端瀏覽器解除跨域限制
瀏覽器默認(rèn)都是開啟跨域安全檢查的停撞，我們可以使用命令行啟動(dòng)瀏覽器，加上禁止安全檢查的參數(shù)，以谷歌瀏覽器為例戈毒，chrome.exe --disable-web-security --user-data-dir=E:/temp --user-data-dir 為瀏覽器緩存臨時(shí)目錄艰猬，瀏覽器這時(shí)會提示安全問題。
2.1.1 瀏覽器如何判斷一個(gè)請求是不是跨域請求埋市？
瀏覽器會根據(jù)同源策略來判斷一個(gè)請求是不是跨域請求冠桃。
非跨域請求，在請求頭中會只包含請求的主機(jī)名道宅。
跨域請求食听，在請求頭中會既包含要請求的主機(jī)名還包括當(dāng)前的源主機(jī)名，如果這兩者不一致污茵，那就是跨域請求了樱报。
2.1.2 瀏覽器對請求的分類
在HTTP1.1 協(xié)議中的，請求方法分為GET泞当、POST迹蛤、PUT、DELETE襟士、HEAD盗飒、TRACE、OPTIONS敌蜂、CONNECT 八種箩兽。瀏覽器根據(jù)這些請求方法和請求類型將請求劃分為簡單請求和非簡單請求。
簡單請求：瀏覽器先發(fā)送（執(zhí)行）請求然后再判斷是否跨域章喉。
請求方法為 GET汗贫、POST、HEAD秸脱，請求頭header中無自定義的請求頭信息落包，請求類型Content-Type 為 text/plain、multipart/form-data摊唇、application/x-www-form-urlencoded 的請求都是簡單請求咐蝇。
非簡單請求：瀏覽器先發(fā)送預(yù)檢命令（OPTIONS方法），檢查通過后才發(fā)送真正的數(shù)據(jù)請求巷查。
{% asset_img 非簡單請求的預(yù)檢命令.png 非簡單請求的預(yù)檢命令%}
預(yù)檢命令會發(fā)送自定義頭為Access-Control-Request-Headers: content-type的請求到服務(wù)器有序，根據(jù)響應(yīng)頭的中的 “Access-Control-Allow-Headers”: “Content-Type” 判斷服務(wù)器是否允許跨域訪問。預(yù)檢命令是可以緩存岛请，服務(wù)器端設(shè)置 “Access-Control-Max-Age”: “3600”旭寿，這樣后面發(fā)送同樣的跨域請求就不需要先發(fā)送預(yù)檢命令了。
請求方法為 PUT崇败、DELETE 的 AJAX 請求盅称、發(fā)送 JSON 格式的 AJAX 請求肩祥、帶自定義頭的 AJAX 請求都是非簡單請求。
2.2 發(fā)送JSONP請求替代XHR請求
2.2.1 JSONP 是什么
JSONP（JSON with Padding）是JSON的一種補(bǔ)充使用方式缩膝，不是官方協(xié)議混狠，而是利用 Script 標(biāo)簽請求資源可以跨域的特點(diǎn)，來解決跨域問題的疾层，是一種變通的解決方案将饺。
2.2.2 使用 JSONP，服務(wù)器后臺需要改動(dòng)嗎云芦？
答案是需要俯逾，這里以Spring Boot為例，在 Spring Boot 1.5 大版本中舅逸，添加一個(gè)切面來支持JSONP請求桌肴，注意在 Spring Boot 2.x 大版本中已經(jīng)廢棄了 AbstractJsonpResponseBodyAdvice 類，不推薦這種方式解決跨域問題琉历。
AJAX代碼如下：
$.ajax({
url: baseUrl + "/get1",
dataType: "jsonp", // 關(guān)鍵字段
jsonp: "callback", // 前后端默認(rèn)的約定
cache: true, // 表示請求結(jié)果可以被緩存坠七，url中不會有下劃線參數(shù)了
success: function(json) {
result = json;
}
});
服務(wù)端代碼：
@ControllerAdvice
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice {
public JsonpAdvice() {
super("callback");
}
}
2.2.3 JSONP 實(shí)現(xiàn)原理
JSONP請求的類型是JavaScript腳本（callback 作為前后端的約定，callback的值做為方法名旗笔，json內(nèi)容作為方法的參數(shù)）彪置，而XHR請求的類型是json類型。
可以在瀏覽器中查看 Jquery 源碼來驗(yàn)證 JSONP 是否將請求包裝成了 script 腳本蝇恶。
在 Jquery 源碼中打斷點(diǎn)拳魁。
刷新后查看 element 元素，可以看到 Jquery 在 html 源碼中添加了 script 標(biāo)簽撮弧。
2.2.4 JSONP 的缺點(diǎn)
1潘懊、只支持 GET 方法請求，不管 AJAX 中實(shí)際的請求方法是不是 GET
2贿衍、服務(wù)端還需要修改代碼
3授舟、發(fā)送的不是 XHR 請求，無法使用 XHR 對象（但這也是為什么可以解決跨域問題的根本）
總之贸辈，并不推薦使用 JSONP 方式來解決跨域問題释树，因?yàn)檫€有更好的解決方式。
2.3 修改服務(wù)器端
根據(jù)現(xiàn)如今網(wǎng)站架構(gòu)設(shè)計(jì)擎淤，可以將前端應(yīng)用看作調(diào)用方使用服務(wù)奢啥，將后端應(yīng)用看作被調(diào)用方提供服務(wù)。
根據(jù)服務(wù)器的作用嘴拢，可以將服務(wù)器分為 HTTP 服務(wù)器和應(yīng)用服務(wù)器桩盲，所有修改服務(wù)器端既可以是修改應(yīng)用服務(wù)器，也可以是修改 HTTP 服務(wù)器炊汤。
2.3.1 被調(diào)用方修改
被調(diào)用方的解決思路是在響應(yīng)頭中增加指定的字段允許調(diào)用方服務(wù)器跨域調(diào)用正驻。
在應(yīng)用服務(wù)器增加指定字段
對于不帶 Cookie 的跨域請求，設(shè)置允許跨域的原始域名為任意域名抢腐，“Access-Control-Allow-Origin”: “”姑曙，設(shè)置允許跨域的方法為任意方法，“Access-Control-Allow-Methods”: “”迈倍，但是這樣的星號設(shè)置不能滿足帶 Cookie 的跨域請求伤靠。
對于帶 Cookie 的跨域請求，要指名允許跨域請求的調(diào)用方主機(jī)名啼染，Cookie 要加在調(diào)用方宴合。
帶自定義頭的跨域請求，設(shè)置允許跨域的請求頭自定義的請求頭迹鹅，“Access-Control-Allow-Headers”:“自定義的請求頭”卦洽。
在 Java Web 中，可以添加一個(gè)過濾器來設(shè)置上面的參數(shù)斜棚。
而使用 Spring Boot 框架阀蒂，只需要在 Controller 類上加上 @CrossOrigin 注解就可以輕松解決跨域問題了。
在 HTTP 服務(wù)器增加指定字段
以常用的 Nginx 服務(wù)器和 Apache 服務(wù)器為例弟蚀。
Nginx 服務(wù)器允許跨域配置（注意不要手動(dòng)直接點(diǎn)擊Nginx.exe蚤霞，否則停止和重新載入配置會失敗的）：
Apache 服務(wù)器允許跨域配置：
2.3.2 調(diào)用方修改
調(diào)用方的解決思路是反向代理，也即是將被調(diào)用方的域名代理到調(diào)用方域名下义钉，這樣就符合同源策略了昧绣，也就解決了跨域問題。
調(diào)用方修改一般都是直接修改 HTTP 服務(wù)器配置捶闸。
Nginx 服務(wù)器反向代理配置：
Apache 服務(wù)器反向代理配置：
