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

時間 2019-12-06

原文原文鏈接

如今愈來愈多的項目就算是一個管理後端也偏向於使用先後端分離的部署方式去作，爲了順應時代的潮流，一先後端分離就產生了跨域問題，因此許多同窗把跨域和先後端分離項目聯繫在了一塊兒，其實跨域產生的緣由並非先後端分離致使的，那咱們一塊兒來看一下，但願能夠靠這一篇文章解答你們全部的跨域問題javascript

1、跨域產生的條件

使用xmlHttpRequest,即咱們一般說的ajax請求
瀏覽器作了這個事
訪問的域名不一樣，即訪問的html頁面是a域名下的，但內部js發送的ajax請求的目標地址倒是b域名

以上三個條件缺一不可，尤爲是第三個條件許多作移動端的同窗可能都沒有聽過，由於移動端爽爽的用各類http請求狂發不一樣的域名，可是瀏覽器不容許咱們這麼作，爲了一個詞安全html

2、如何解決跨域問題

解決跨域問題的根本就是要打破上述的三個限制中的任何一個，咱們來看一下逐個擊破的方式前端

JSONP方式

jsonp是打破第一重限制，用了XMLHttpRequest就跨域，那我不用這種方式了，咱們怎麼作的，來看一段jquery的帶jsonp的ajax請求java

$.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操做成這樣jquery

<!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，即nginx

showLocation({
	status: 0,
	result: {
		location: {
			lng: 121.4219317908279,
			lat: 31.361653367912695
		},
		precise: 1,
		confidence: 80,
		comprehension: 99,
		level: "道路"
	}
})

而後瀏覽器直接執行了對應的這個showLocation()… 等等，這個不就至關於執行了咱們上面定義的window.showLocation方法而且傳入了咱們須要的json返回嗎，那咱們的ajax success方法裏就能夠獲得這個返回類型了，而且沒有跨域，是否是很精妙。ajax

CORS

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解。這個玩樣用於「破解」掉瀏覽器的限制，說是破解其實也是瀏覽器認識到了一些頭部就放行了的意思，須要在http的response內多設置幾個頭部chrome

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反向代理上配置json

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

	}

}

這樣就變成同源了