溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
現在越來越多的項目就算是一個管理后端也偏向于使用前后端分離的部署方式去做，為了順應時代的潮流，一前后端分離就產生了跨域問題，所以許多同學把跨域和前后端分離項目聯系在了一起，其實跨域產生的原因并不是前后端分離導致的，那我們一起來看一下，希望可以靠這一篇文章解答大家所有的跨域問題
以上三個條件缺一不可，尤其是第三個條件許多做移動端的同學可能都沒有聽過，因為移動端爽爽的用各種http請求狂發不同的域名，但是瀏覽器不允許我們這么做，為了一個詞安全
解決跨域問題的根本就是要打破上述的三個限制中的任何一個，我們來看一下逐個擊破的方式
jsonp是打破第一重限制，用了XMLHttpRequest就跨域，那我不用這種方式了，我們怎么做的，來看一段jquery的帶jsonp的ajax請求
$.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請求，其實內部完全不是那么回事，多了jsonp和jsonpCallback選項，它內部將代碼翻譯并把頁面上的dom操作成這樣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type='text/javascript'>
// 后端返回直接執行的方法，相當于執行這個方法，由于后端把返回的數據放在方法的參數里，所以這里能拿到res。
window.showLocation = function (res) {
console.log(res)
//執行ajax回調
}
</script>
<script src='http://api.map.baidu.com/geocoder/v2/?address=上海&callback=showLocation' type='text/javascript'></script>
</body>
</html>這個時候，html頁面的script src標簽回去訪問api.map.baidu.com的服務端，由于script，img這種標簽瀏覽器是不受xmlhttprequest限制的，可以隨意訪問，這個時候對應的后端代碼取得address參數，最后根據雙方約定好的callback參數，返回一個被包裝后的json，即
showLocation({
status: 0,
result: {
location: {
lng: 121.4219317908279,
lat: 31.361653367912695
},
precise: 1,
confidence: 80,
comprehension: 99,
level: "道路"
}
})然后瀏覽器直接執行了對應的這個showLocation()… 等等，這個不就相當于執行了我們上面定義的window.showLocation方法并且傳入了我們需要的json返回嗎，那我們的ajax success方法里就可以得到這個返回類型了，并且沒有跨域，是不是很精妙。
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解。這個玩樣用于“破解”掉瀏覽器的限制，說是破解其實也是瀏覽器認識到了一些頭部就放行了的意思，需要在http的response內多設置幾個頭部
若你使用的是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 *;
}打破不同源的限制，我只要讓它同源就可以了，比如要我的靜態頁面是 http://a.com/index.html 動態ajax請求訪問的是http://b.com/api/***
我只需要將對應的服務部署在不同的機器上，然后使用一個公共的c.com的域名作為nginx反向代理的入口域名，在將靜態服務和動態服務分別掛在后面的被代理局域網服務器內，修改配置
server{
listen:80;
server_name: c.com;
#靜態資源
location /{
proxy_pass http://localhost:8080/;
}
#ajax動態請求
location /api{
proxy_pass http://localhost:8081/;
}
}這樣就變成同源了
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
