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

时间:2023-01-16 15:15: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在浏览器跨域请求时的问题了。下边贴出代码:

jQuery异步请求(如getJSON)跨域解决方案
$(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);
  });
});
jQuery异步请求(如getJSON)跨域解决方案

通过以上代码我们就可以轻松的获取各大网站提供的API数据了。通过跟踪得到实例所读取的json数据如下:

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

实现跨域有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

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