實現跨域訪問

同源策略

若是非同源，三種行爲受到限制：
1.Cookie、LocalStorage和indexDB沒法讀取
2.DOM沒法得到
3.AJAX請求不能發送
雖然這些限制是必要的，可是有時很不方便，合理的用途也受到影響
所謂"同源"指的是"三個相同"：協議相同、域名相同以及端口相同

• 域名

域名又稱爲網域，是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名稱，用於在數據傳輸時標識計算機的電子方位(有時也指地理位置)

• 跨域

當一個資源從與該資源自己所在的服務器不一樣的域或端口請求一個資源時，資源會發起一個跨域HTTP請求
處於安全緣由，瀏覽器限制從腳本內發起的跨源HTTP請求。例如：XMLHttpRequest和FetchAPI遵循同源策略。這意味着使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源
常見跨域分爲兩種：
1.徹底跨域：就是指一個頂級域名反向另外一個頂級域名
2.跨子域：相同頂級域名下的兩個子級域名相互通訊

• 常見跨域

HTML頁面中一些容許指定路徑的元素具備跨域特性：
<link>元素
<script>元素
<img>元素
<iframe>元素

JSONP

JSONP是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題
利用<script>元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的JSON資料，而這種使用模式就是所謂的JSONP

• <script>元素實現

網頁經過添加一個<script>元素，想服務器請求JSON數據，這種作法不受同源政策限制；服務器收到請求後，將數據放在一個指定名字的回調函數裏傳回來

function addScriptTag(src){
    var script=document.createElement('srcipt');
    script.setAttribute('type','text/javascript');
    script.src=src;
    document.body.appendChild(script);
}
window.onload=function(){
    addScriptTag('http://127.0.0.1:3000?callback=foo');
}

function foo(data){
    console.log('Your public IP address is:'+data.ip);
}

• $.getJSON()方法

jQuery中的$.getJSON()方法容許經過使用JSONP形式的回調函數來加載其餘網域的JSON數據

$.getJSON('http://127.0.0.1:3000?callback=?',function(data){
    console.log(data);
});

$.getJSON()方法的第一個參數表示url，須要在該參數後面添加‘callback=?’，jQuery將「？」自動替換爲正確的函數名，以執行回調函數