jQuery异步请求(如getJSON)跨域解决方案

Posted 2020-08-10

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