什麽是跨域

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

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

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

1. 用戶訪問www.mybank.com ，登陸並進行網銀操作，這時cookie啥的都生成並存放在瀏覽器
2. 用戶突然想起件事，並迷迷糊糊地訪問了一個邪惡的網站 www.xiee.com
3. 這時該網站就可以在它的頁面中，拿到銀行的cookie，比如用戶名，登陸token等，然後發起對www.mybank.com 的操作。
4. 如果這時瀏覽器不予限制，並且銀行也沒有做響應的安全處理的話，那麽用戶的信息有可能就這麽泄露了。

為什麽要跨域

既然有安全問題，那為什麽又要跨域呢？ 有時公司內部有多個不同的子域，比如一個是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) + ‘)‘;//
 
jsonp
    res.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);

轉自：http://blog.csdn.net/notechsolution/article/details/50394391

跨域與跨域訪問