这两天做微信端JS接口,当时遇到的第一个问题就是权限验证的参数请求,当你请求access_token等的时候,就会存在跨域问题:然后在网上查了,采用ajax的jsonp进行跨域请求,后来报错了,返回的结果错误。然后认真看了一下文档,发现ajax的jsonp返回的数据是callback(json),卡到这里。最后同时为了安全的考虑,我就将这一部分的权限验证参数在后端做,然后前端请求,这样就避免了跨域,同时将安全考虑进去了。
完成微信JS接口后,我返回来思考这个问题,还是希望找到一种方法,实现跨域请求json数据,不改变后端接口。最后在showbo的帮助下找到了解决办法,这里非常感谢showbo。
yahoo提供的jsonp代理:http://query.yahooapis.com/v1/public/yql
直接上代码:
json:
<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql',
dataType: 'jsonp',
data: {
q: "select * from json where url="http://www.w3dev.cn/json.asp"",
format: "json"
},
success: function (d) {
alert(JSON.stringify(d))//远程json数据放在query.results下
}
});
</script>
HTML:
<script type="text/javascript" src="http://www.w3dev.cn/rardownload/20130106/20130106170832648.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql',
dataType: 'jsonp',
data: {
q: "select * from html where url="http://www.w3dev.cn/eg/base64.aspx"",
format: "xml"
},
success: function (d) {
alert(JSON.stringify(d))//跨域html代码放在results下,注意和json的区别
}
});
</script>
注意:如果在请求的时候带有参数,为了安全考虑,这种请求最好放在后端。
参考:http://www.w3dev.cn/article/20130228/JSONP-crossdomain-online-httpproxy-api.aspx
其他
[我的博客,欢迎交流!](http://rattenking.gitee.io/stone/index.html)
[我的CSDN博客,欢迎交流!](https://blog.csdn.net/m0_38082783)
[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)
[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)
[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)
[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)
[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)
[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)
[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)
[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)