現(xiàn)在越來(lái)越多的項(xiàng)目就算是一個(gè)管理后端也偏向于使用前后端分離的部署方式去做，為了順應(yīng)時(shí)代的潮流疫稿，一前后端分離就產(chǎn)生了跨域問(wèn)題培他，所以許多同學(xué)把跨域和前后端分離項(xiàng)目聯(lián)系在了一起，其實(shí)跨域產(chǎn)生的原因并不是前后端分離導(dǎo)致的遗座，那我們一起來(lái)看一下舀凛，希望可以靠這一篇文章解答大家所有的跨域問(wèn)題
一、跨域產(chǎn)生的條件
- 使用xmlHttpRequest,即我們通常說(shuō)的ajax請(qǐng)求
- 瀏覽器做了這個(gè)事
- 訪問(wèn)的域名不同途蒋，即訪問(wèn)的html頁(yè)面是a域名下的猛遍，但內(nèi)部js發(fā)送的ajax請(qǐng)求的目標(biāo)地址卻是b域名
以上三個(gè)條件缺一不可，尤其是第三個(gè)條件許多做移動(dòng)端的同學(xué)可能都沒有聽過(guò)号坡，因?yàn)橐苿?dòng)端爽爽的用各種http請(qǐng)求狂發(fā)不同的域名懊烤，但是瀏覽器不允許我們這么做，為了一個(gè)詞安全
二宽堆、如何解決跨域問(wèn)題
解決跨域問(wèn)題的根本就是要打破上述的三個(gè)限制中的任何一個(gè)腌紧，我們來(lái)看一下逐個(gè)擊破的方式
JSONP方式
jsonp是打破第一重限制，用了XMLHttpRequest就跨域畜隶，那我不用這種方式了壁肋，我們?cè)趺醋龅模瑏?lái)看一段jquery的帶jsonp的ajax請(qǐng)求
$.ajax({
type : "GET",
url : "http://api.map.baidu.com/geocoder/v2/",
data:"address=上海",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"showLocation",
success : function(data){
alert("成功");
},
error : function(data){
alert("失敗");
}
});
看似用了ajax請(qǐng)求籽慢，其實(shí)內(nèi)部完全不是那么回事浸遗，多了jsonp和jsonpCallback選項(xiàng)，它內(nèi)部將代碼翻譯并把頁(yè)面上的dom操作成這樣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type='text/javascript'>
// 后端返回直接執(zhí)行的方法箱亿，相當(dāng)于執(zhí)行這個(gè)方法跛锌，由于后端把返回的數(shù)據(jù)放在方法的參數(shù)里，所以這里能拿到res届惋。
window.showLocation = function (res) {
console.log(res)
//執(zhí)行ajax回調(diào)
}
</script>
<script src='http://api.map.baidu.com/geocoder/v2/?address=上海&callback=showLocation' type='text/javascript'></script>
</body>
</html>
這個(gè)時(shí)候察净，html頁(yè)面的script src標(biāo)簽回去訪問(wèn)api.map.baidu.com的服務(wù)端，由于script盼樟，img這種標(biāo)簽瀏覽器是不受xmlhttprequest限制的氢卡，可以隨意訪問(wèn)，這個(gè)時(shí)候?qū)?yīng)的后端代碼取得address參數(shù)晨缴，最后根據(jù)雙方約定好的callback參數(shù)译秦，返回一個(gè)被包裝后的json，即
showLocation({
status: 0,
result: {
location: {
lng: 121.4219317908279,
lat: 31.361653367912695
},
precise: 1,
confidence: 80,
comprehension: 99,
level: "道路"
}
})
然后瀏覽器直接執(zhí)行了對(duì)應(yīng)的這個(gè)showLocation()… 等等，這個(gè)不就相當(dāng)于執(zhí)行了我們上面定義的window.showLocation方法并且傳入了我們需要的json返回嗎筑悴，那我們的ajax success方法里就可以得到這個(gè)返回類型了们拙，并且沒有跨域，是不是很精妙阁吝。
CORS
CORS是一個(gè)W3C標(biāo)準(zhǔn)砚婆，全稱是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解。這個(gè)玩樣用于“破解”掉瀏覽器的限制突勇，說(shuō)是破解其實(shí)也是瀏覽器認(rèn)識(shí)到了一些頭部就放行了的意思装盯，需要在http的response內(nèi)多設(shè)置幾個(gè)頭部
- Access-Control-Allow-Origin:* 表明允許所有的origin（瀏覽器的html頁(yè)面路徑）訪問(wèn)，而并非是同源的origin
-
Access-Control-Request-Method:* 表明允許所有的http request頭甲馋，訪問(wèn)埂奈，因?yàn)闉g覽器在觸發(fā)如下幾個(gè)場(chǎng)景會(huì)在發(fā)送真正的數(shù)據(jù)前發(fā)送options這樣的預(yù)檢請(qǐng)求檢測(cè)，一旦預(yù)檢通過(guò)后才會(huì)發(fā)送真正的get或post數(shù)據(jù)請(qǐng)求定躏，這個(gè)時(shí)候我們按照cors的設(shè)置就需要允許對(duì)應(yīng)的method訪問(wèn)账磺，觸發(fā)的幾種情況包括
1:請(qǐng)求的方法不是GET/HEAD/POST
2:POST請(qǐng)求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3:請(qǐng)求設(shè)置了自定義的header字段等 - Access-Control-Allow-Headers:* 設(shè)置所有header均可以被允許，這個(gè)配置聯(lián)通上述的request method options檢測(cè)一起使用痊远，可以在需要自定義header的場(chǎng)景下使用
- Access-Control-Allow-Credentials：true 這個(gè)參數(shù)只有當(dāng)需要跨域使用cookie傳遞時(shí)才需要設(shè)置為true垮抗，并且需要前端ajax配置使用xhrField:{withCredential:true}時(shí)才能傳遞cookie，另外safari和最新版本的chrome瀏覽器還需要在設(shè)置內(nèi)放開對(duì)應(yīng)限制碧聪，可參考我的秒殺課程,當(dāng)這個(gè)參數(shù)被設(shè)置成true時(shí)候Access-Control-Allow-Origin就不能設(shè)置為*借宵，否則就變成任何origin域都能允許傳遞cookie了，可將其調(diào)整為前端origin字段傳什么我就用什么
若你使用的是nginx反向代理矾削，則可以直接在nginx反向代理上配置
location /{
proxy_pass http://backendserver;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Headers *;
}
代理法
打破不同源的限制壤玫，我只要讓它同源就可以了，比如要我的靜態(tài)頁(yè)面是 http://a.com/index.html 動(dòng)態(tài)ajax請(qǐng)求訪問(wèn)的是http://b.com/api/***
我只需要將對(duì)應(yīng)的服務(wù)部署在不同的機(jī)器上哼凯，然后使用一個(gè)公共的c.com的域名作為nginx反向代理的入口域名欲间，在將靜態(tài)服務(wù)和動(dòng)態(tài)服務(wù)分別掛在后面的被代理局域網(wǎng)服務(wù)器內(nèi)，修改配置
server{
listen:80;
server_name: c.com;
#靜態(tài)資源
location /{
proxy_pass http://localhost:8080/;
}
#ajax動(dòng)態(tài)請(qǐng)求
location /api{
proxy_pass http://localhost:8081/;
}
}
這樣就變成同源了
寫在最后
- 第一：看完點(diǎn)贊断部，感謝您對(duì)作者的認(rèn)可猎贴；
- ...
- 第二：隨手轉(zhuǎn)發(fā)，分享知識(shí)蝴光，讓更多人學(xué)習(xí)到她渴；
- ...
- 第三：記得點(diǎn)關(guān)注，每天更新的Ｃ锼睢３煤摹！
- ...
