什么是跨域

跨域是指從一個域名的網頁去請求另一個域名的資源。比如從www.baidu.com 頁面去請求 www.google.com 的資源。跨域的嚴格一點的定義是：只要 協議，域名，端口有任何一個的不同，就被當作是跨域

為什么瀏覽器要限制跨域訪問呢？

原因就是安全問題：如果一個網頁可以隨意地訪問另外一個網站的資源，那么就有可能在客戶完全不知情的情況下出現安全問題。比如下面的操作就有安全問題：

用戶訪問www.mybank.com ，登陸并進行網銀操作，這時cookie啥的都生成并存放在瀏覽器

用戶突然想起件事，并迷迷糊糊地訪問了一個邪惡的網站 www.xiee.com

這時該網站就可以在它的頁面中，拿到銀行的cookie，比如用戶名，登陸token等，然后發起對www.mybank.com 的操作。

如果這時瀏覽器不予限制，并且銀行也沒有做響應的安全處理的話，那么用戶的信息有可能就這么泄露了。

為什么要跨域

既然有安全問題，那為什么又要跨域呢？ 有時公司內部有多個不同的子域，比如一個是location.company.com ,而應用是放在app.company.com , 這時想從 app.company.com去訪問 location.company.com 的資源就屬于跨域。

跨域訪問需要的兩件寶貝

由于瀏覽器一般不對script，img等進行跨域限制，所以我們有機會通過script的方式來實現跨域訪問。

跨域訪問需要用到兩樣東東，一個是JSON，一種基于文本的傳輸協議；一種是JSONP，一群碼農想出來的跨域解決方案。關于JSON與JSONP的解釋，可以參考?JSON & JSONP

實現跨域訪問 服務端需要做什么

服務端要檢查訪問的請求參數，如果沒有callback，則可以按照之前的流程走；如果帶著callback參數，則需要將返回的結果包裝在callback里面。

比如請求的URL是: app.company.com/location?callback=myCallback , 那么服務端則需要把結果封裝進myCallback 函數里面， 如下

if (params.query && params.query.callback) {//console.log(params.query.callback);var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonpres.end(str);} else {res.end(JSON.stringify(data));//普通的json}

實現跨域訪問 客戶端需要做什么

客戶端有多種方式可以實現JSONP的調用：

• jQuery?
  jQuery可以在Ajax里面設置datatype為jsonp，則可以進行跨域訪問

$scope.jqueryJsonpRequest = function(){jQuery.ajax({type: "get",async: false,url: "https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts",dataType: "jsonp",jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback)jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據success: function(json){alert('success' + JSON.stringify(json));},error: function(){alert('fail');}});};

• AngularJS?
  AngularJS的$http 也提供了對jsonp的訪問，直接調用jsonp進行跨域訪問

$http.jsonp('https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK').success(function(data){alert('success:'+data);}).error(function(err){alert('error:'+err);});

• 手動實現?
  不管是jQuery也好，AngularJS也罷，底下都不是發起XHR （XML HTTP Request），而都是通過加載javascript的方式來做的，所以如果項目沒有依賴jQuery或者AngularJS，則可以自己手動實現jsonp的調用。

  原理很簡單，就是用javascript動態加載一個script文件，同時定義一個callback函數給script執行而已。

  //定義callback 函數 var myCallbackFunction = function(data){// 對返回的數據做后續處理alert('uuu:'+JSON.stringify(data));} //把callback函數賦給window對象，供script回調 window.myCallbackFunction = myCallbackFunction; //創建并加載script var script = document.createElement('script'); script.src = 'https://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=myCallbackFunction'; document.body.appendChild(script);

總結

以上是生活随笔為你收集整理的跨域与跨域访问的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。