相信大家在使用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
