解決跨域問題，實例調用百度地圖

1.什麼是跨域？

瀏覽器對於javascript的同源策略的限制,例如a.com下面的js不能調用b.com中的js,對象或數據(由於a.com和b.com是不一樣域),因此跨域就出現了。同域的概念又是什麼呢?所謂的同源是指，域名、協議、端口均爲相同。

2.如何解決跨域？

JSONP:
JSONP 是一種非官方的跨域數據交互協議。JSONP 本質上是利用 <script><img><iframe>等標籤不受同源策略限制，能夠從不一樣域加載並執行資源的特性，來實現數據跨域傳輸。
JSONP由兩部分組成：回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數，而數據就是傳入回調函數中的JSON數據。<br/>這種方式很是好用，可是有一個缺陷，只能實現get請求。

設置代理：
能夠在服務器搭建nginx代理轉發，或者由後臺去調用以後把結果返回給前端，後臺作一下中轉。還能夠搭建node服務器，用node進行代理轉發。

請求的後臺設置容許跨域：
header('Access-Control-Allow-Origin:*');//容許全部來源訪問
header('Access-Control-Allow-Method:POST,GET');//容許訪問的方式

iframe:
因此跨域通訊其實很簡單，在iframe和主頁裏都不斷地檢測hashtag有沒有變化，一旦有變化，就作出相應的改變。

setInterval(function() {
    var hashVal = window.location.hash.substr(1);
    document.body.style.backgroundColor = hashVal;
}, 1000);

這麼作的問題就是，須要不斷地去檢測hashtag是否改變，效率有點低，若是能經過原生的監聽來實現，就會更加高效和優雅。這裏就涉及到另外一個iframe特性：能夠設置其餘iframe的大小，即便是不一樣域的。而頁面的resize事件是能夠監聽的，因此就有了下面這個模型。<br/>
主頁面先把消息附加到hashtag，而後改變一個隱藏的(或者頁面外的)iframe的size。這個iframe會監聽resize事件，同時捕獲到hashtag。捕獲到hashtag後(也就是所需的數據)，再對hashtag作進一步的處理。處理完後把數據傳到主頁內的一個iframe，或者直接操做該iframe。這樣就比較優雅地完成了跨域操做。

3.實例

最近在作一個涉及到地圖的項目，使用的是百度地圖API，就出現了跨域的問題。
http://api.map.baidu.com/geoc... 這個api的做用是獲取周邊地理信息，在調用的時候產生了跨域問題

後面採用了JSONP的方式解決

$.ajax({
    url: 'http://api.map.baidu.com/geocoder/v2/?address=成都&output=json&ak=sn4yosvUfbGYsdffew3wq23114',
    type: 'GET',
    async:false,//設置同步。ajax默認異步
    dataType: 'jsonp',
    jsonp:'callback',//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(默認爲:callback)
    jsonpCallback:"callback",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名
    timeout: 5000,
    contentType: 'application/json; charset=utf-8',
    success: function (result){
        console.log(result);
    }
})

不少時候咱們都會碰到跨域問題，但也有不少方法來解決跨域問題，在解決跨域時，咱們也要注意一下安全性問題