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種方法：

一、經過本身自行編寫代碼實現；

二、經過eezzo.com提供的API直接進讀取，畢竟拿來主義仍是比較靠譜的

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

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

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