js實作跨域的幾種方法匯總（圖片ping、JSONP和CORS）_javascript技巧

跨域

雖然有同源策略的存在，但在js中跨域也依然很常見，有document.domain、window.name、圖片ping、jsonp、CORS，在這裡簡單總結下圖片ping、jsonp和CORS備忘。

圖片ping

圖片可以從任何URL中加載，所以將img的src設定成其他網域的URL，即可以實現簡單的跨域，可以使用onload和onerror事件來確定是否接受到了回應。

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

這裡新建了一個img對象，給出的url是博客地址，這裡是個error事件，所以彈出error；如果將URL改為一張圖片http://images.jb51.net//710118 /o_MacBook Air.png，就會彈出onload載入資訊success，實現了簡單的跨域。

使用圖片ping跨域只能發送get請求，並且不能訪問響應的文本，只能監聽是否響應而已，可以用來追蹤廣告點擊。

jsonp

jsonp是帶有回呼函數callback的json，原名json with padding，翻譯是填充式json，參數式json。

因為script的src可以跨域，所以在發送的URL後面加上一個callback參數傳遞給伺服器，然後伺服器傳回的資料會作為callback的參數，因為這個callback是我們自己來實現的，所以可以對接受到的json資料進行處理。

簡單程式碼如下：

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

這裡，我們把腳本的src設定為http://freegeoip.net/json/?callback=call，這是一個取得使用者ip位址的api（有興趣的可以點擊這裡查看），然後將callback當作一個參數拼接在URL後，傳回的json資料就會作為callback的參數，在這裡callback我們定義為call函數，也就是傳回的json資料就會作為call的參數傳進去，這個call函數僅僅彈出用戶的城市city。筆者這裡的輸出結果是河北。其他ip資訊可以查看官網，上面有詳細的列表，例如country_name，time_zone等。

CORS（跨資源共享）

CORS是跨資源共享，cross site resourse sharing，它和ajax其實是大體相同的，對於ie實例化的是xdr對象，XDomainRequest，我們能訪問的也只有responseText，觸發的事件有load和error，寫法和xhr大致相同，也需要open和send。

對於ff，chrome等其他瀏覽器實例化的是xhr，在這裡myvin只拿xhr來示範下，如果要實作跨瀏覽器，可以配合xdr實作相容。

xhr如下：

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

這裡使用的url是http://www.jb51.net，和ajax唯一的區別就是url使用的是跨域的絕對地址，在ajax中使用的本頁內的相對地址或絕對地址。

看一下控制台，這裡用的是ff40.0.3，顯示資訊如下：

已阻止跨來源請求：同源策略禁止讀取位於 http://www.jb51.net 的遠端資源。 （原因：CORS 頭缺少 'Access-Control-Allow-Origin'）。

所以用CORS實作跨域還有一步要做，就是在伺服器端設定Access-Control-Allow-Origin。