解決跨域問題，實例調用百度地圖
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
解決跨域問題，實例調用百度地圖