現在越來越多的項目就算是一個管理後端也偏向於使用前後端分離的部署方式去做，為了順應時代的潮流，一前後端分離就產生了跨域問題，所以許多同學把跨域和前後端分離項目聯繫在了一起，其實跨域產生的原因並不是前後端分離導致的，那我們一起來看一下，希望可以靠這一篇文章解答大家所有的跨域問題 一、跨域產生的條件 使 ...
現在越來越多的項目就算是一個管理後端也偏向於使用前後端分離的部署方式去做，為了順應時代的潮流，一前後端分離就產生了跨域問題，所以許多同學把跨域和前後端分離項目聯繫在了一起，其實跨域產生的原因並不是前後端分離導致的，那我們一起來看一下，希望可以靠這一篇文章解答大家所有的跨域問題
一、跨域產生的條件
- 使用xmlHttpRequest,即我們通常說的ajax請求
- 瀏覽器做了這個事
- 訪問的功能變數名稱不同，即訪問的html頁面是a功能變數名稱下的，但內部js發送的ajax請求的目標地址卻是b功能變數名稱
以上三個條件缺一不可，尤其是第三個條件許多做移動端的同學可能都沒有聽過，因為移動端爽爽的用各種http請求狂發不同的功能變數名稱，但是瀏覽器不允許我們這麼做，為了一個詞安全
二、如何解決跨域問題
解決跨域問題的根本就是要打破上述的三個限制中的任何一個，我們來看一下逐個擊破的方式
JSONP方式
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
CORS是一個W3C標準，全稱是"跨域資源共用"（Cross-origin resource sharing）跨域資源共用 CORS 詳解。這個玩樣用於“破解”掉瀏覽器的限制，說是破解其實也是瀏覽器認識到了一些頭部就放行了的意思，需要在http的response內多設置幾個頭部
- Access-Control-Allow-Origin:* 表明允許所有的origin（瀏覽器的html頁面路徑）訪問，而並非是同源的origin
- Access-Control-Request-Method:* 表明允許所有的http request頭，訪問，因為瀏覽器在觸發如下幾個場景會在發送真正的數據前發送options這樣的預檢請求檢測，一旦預檢通過後才會發送真正的get或post數據請求，這個時候我們按照cors的設置就需要允許對應的method訪問，觸發的幾種情況包括
1:請求的方法不是GET/HEAD/POST
2:POST請求的Content-Type並非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3:請求設置了自定義的header欄位等 - Access-Control-Allow-Headers:* 設置所有header均可以被允許，這個配置聯通上述的request method options檢測一起使用，可以在需要自定義header的場景下使用
- Access-Control-Allow-Credentials：true 這個參數只有當需要跨域使用cookie傳遞時才需要設置為true，並且需要前端ajax配置使用xhrField:{withCredential:true}時才能傳遞cookie，另外safari和最新版本的chrome瀏覽器還需要在設置內放開對應限制，可參考我的秒殺課程,當這個參數被設置成true時候Access-Control-Allow-Origin就不能設置為*，否則就變成任何origin域都能允許傳遞cookie了，可將其調整為前端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 *; }
代理法
打破不同源的限制，我只要讓它同源就可以了，比如要我的靜態頁面是 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/; } }
這樣就變成同源了
寫在最後
- 第一：看完點贊，感謝您對作者的認可；
- ...
- 第二：隨手轉發，分享知識，讓更多人學習到；
- ...
- 第三：記得點關註，每天更新的！！！
- ...
