jQuery異步請求(如getJSON)跨域解決方案


相信大家在使用jQuery異步請求非自己網站內相對資源(通過別人站點上的URL直接讀取)使經常會遇到如下錯誤吧,實際上這些錯誤都是瀏覽器安全機制“搞的鬼”,才讓我們開發路上遇到了攔路虎。

當你直接在瀏覽器中請求:“http://www.weather.com.cn/adat/sk/101110101.html”時會得到你需要的json數據。

當你通過jQuery的getJSON方法讀取時你就會得到下列錯誤。

Chrome提示錯誤:

XMLHttpRequest cannot load http://www.weather.com.cn/adat/sk/101110101.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

火狐提示錯誤:

已阻止跨源請求:同源策略禁止讀取位於 http://www.weather.com.cn/adat/sk/101110101.html 的遠程資源。(原因:CORS 頭缺少 'Access-Control-Allow-Origin')。

理解跨域首先必須要了解同源策略。同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。

  • 何謂同源: URL由協議、域名、端口和路徑組成,如果兩個URL的協議、域名和端口相同,則表示他們同源。
  • 同源策略: 瀏覽器的同源策略,限制了來自不同源的"document"或腳本,對當前"document"讀取或設置某些屬性。從一個域上加載的腳本不允許訪問另外一個域的文檔屬性。

如果是自己開發的網站那就很簡單,只需要在后台(C#)輸出json的同時給Response增加一個Header頭,開啟允許跨域請求就可以完美的解決該問題。

C#后台只需要增加如下一句話即可:

Response.AddHeader("Access-Control-Allow-Origin", "null");

如果是別人網站就沒有辦法了,只能借助后台進行處理,畢竟C#讀取是不存在跨域問題的。C#讀取之后,后台進行轉換增加如上的響應頭后輸出,這樣就可以跨域了。

該靈感源自:“eezzo.com”給我的。

當然對於那些無法自行開發的站長而言,可以直接調用eezzo.com的API進行直接轉換,這樣我們就可以完美的解決jQuery在瀏覽器跨域請求時的問題了。下邊貼出代碼:

$(document).ready(function() {
  //測試跨域請求連接
  var requestUrl = "http://www.weather.com.cn/adat/sk/101110101.html";
  //這里一定要注意,實際請求的url其實是以參數形式從eezzo.com讀取的,因此我們都要對url進行編碼,使用encodeURI方法即可
  $.getJSON("http://eezzo.com/API/CD", { url: encodeURI(requestUrl) }, function(json) {
    alert(json);
  });
});

通過以上代碼我們就可以輕松的獲取各大網站提供的API數據了。通過跟蹤得到實例所讀取的json數據如下:

實現跨域有2種方法:

1、通過自己自行編寫代碼實現;

2、通過eezzo.com提供的API直接進讀取,畢竟拿來主義還是比較靠譜的

下邊是測試中用到的獲取天氣json數據的一些資料

C# 獲取天氣 JSON解析        http://blog.csdn.net/ecocn/article/details/8542152

天氣預報接口|API|城市代碼   http://blog.csdn.net/a535537066/article/details/6656365


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM