解決跨域問題，執行個體調用百度地圖

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);
    }
})
           

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

來源：

https://segmentfault.com/a/1190000017098253