首页 > 代码库 > jQuery异步请求(如getJSON)跨域解决方案
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
jQuery异步请求(如getJSON)跨域解决方案