現在越來越多的專案就算是一個管理後端也偏向於使用前後端分離的部署方式去做，為了順應時代的潮流，一前後端分離就產生了跨域問題，所以許多同學把跨域和前後端分離專案聯絡在了一起，其實跨域產生的原因並不是前後端分離導致的，那我們一起來看一下，希望可以靠這一篇文章解答大家所有的跨域問題

一、跨域產生的條件

使用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/;

	}

}

這樣就變成同源了

寫在最後

第一：看完點贊，感謝您對作者的認可；
...
第二：隨手轉發，分享知識，讓更多人學習到；
...
第三：記得點關注，每天更新的！！！
...

阿里P7架構師是如何解決跨域問題的！你有遇到嗎？

一、跨域產生的條件

二、如何解決跨域問題

JSONP方式

CORS

代理法

寫在最後

阿里P7架構師是如何解決跨域問題的！你有遇到嗎？

阿里P7架構師：這些技術點沒搞懂，我勸你不要跳槽！

深入淺出！阿里P7架構師帶你分析ArrayList集合原始碼，建議是先收藏再看！

阿里P7架構師經驗總結——Java架構師必備技能之少走彎路系統學習

阿里P7架構師必修之路（年薪60萬）

轉頭條：阿里p7架構師:三年經驗應該具備什麼樣的技能？

阿里P7架構師談：MySQL慢查詢優化、索引優化、以及表等優化總結

阿里P7架構師談職業生涯規劃，給遇到瓶頸，迷茫期的人群一些建議

阿里P7架構師淺談Java 的年薪 40W 是什麼水平？

阿里P7架構師的成長之路

阿里P7架構師告訴你Java架構師必須知道的 6 大設計原則

阿里P7架構師對Java虛擬機器、類載入機制是怎麼理解的？

詳解阿里P7架構師是怎麼在Spring中實現事務暫停

阿里P8架構師談：什麼是快取雪崩？伺服器雪崩的場景與解決方案

阿里P8架構師談：分散式資料庫資料一致性的原理、與技術實現方案！

阿里p8架構師分享：50道2018年最經典的面試題，（含標準答案！）

Asp.net Web Api 解決跨域問題

node搭建本地服務器後端解決跨域問題

前端開發如何獨立解決跨域問題

crossdomain.xml解決跨域問題

阿里P7架構師是如何解決跨域問題的！你有遇到嗎？

一、跨域產生的條件

二、如何解決跨域問題

JSONP方式

CORS

代理法

寫在最後

相關推薦