1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 使用YQL解决跨域请求json转jsonp问题

使用YQL解决跨域请求json转jsonp问题

时间:2019-04-04 14:51:30

相关推荐

使用YQL解决跨域请求json转jsonp问题

一、跨域报错

首先,是跨域请求的问题,jQuery默认不支持跨域请求,报错如下:

index.html:1 XMLHttpRequest cannot load /data/sk/101280601.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

这个问题很快的到了解决:

1.通过给ajax添加crossDomain:true属性指定跨域

2.将数据格式(dataType)指定为jsonp ,其实指定了这个默认就会开启跨域了,不用进行1操作

二、返回格式报错

这个问题的主要原因在于jQuery ajax要求请求数据类型和返回数据类型是一致的。

因为网站返回的数据类型是json,这跟我们指定的数据交互格式jsonp不一致,在调用时可以看到网络已经返回数据,但是$.ajax并不能以jsonp格式解析数据,在控制台报了如下错误:

这个问题就有点难度了,请求格式不是jsonp,直接不让发送数据,而返回数据又固定为json,真是巨坑啊。

折腾了半天,最后解决方案如下:

使用雅虎提供的YQL代理将数据转换,并且支持网上绝大多数的数据格式,我们只需要按照它指定的格式提交地址即可。

具体代码如下

//目标请求urlvar target="/data/sk/101280601.html";//ajax请求$.ajax({ //雅虎代理urlurl: '/v1/public/yql', //指定数据格式dataType: 'jsonp', //雅虎代理要求的数据格式data: { q: "select * from json where url=\'" + target+ "'", //代理返回格式format: "json" }, success: function (data) { //在控制台输出,页面按F12查看, console.log(data);} });

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。