如何使用yql实现跨域访问
2017-02-08 18:39
239 查看
应用场景
调用百度的某个API, 例如:https://openapi.baidu.com/api返回结果是:{"id":123,"name":"test"}
用$.ajax直接调用的话, 会提示
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
如果返回结果是var obj={"id":123,"name":"test"}; 只需要jsonp就能解决这问题, 但接口是不可能变的,
这种情况下, 如何解决这类问题
雅虎的Yahoo Query Language (YQL)通过它可以把 Web 上的各种数据服务作为数据库表来查询,并获得结果。通过yql服务, 可以把https://openapi.baidu.com/api的内容再次封装, 还可以把接口返回的内容, 再次使用sql语句查询, 然后再通过yql服务返回最终结果
具体使用方法:
打开网址https://developer.yahoo.com/yql/
找到示例, 把默认的示例替换成你自己的: select * from html where url='你要访问的api地址'
然后点击Test, 就能看到Response里面已经有查询结果了
还可以定制查询select id,name from html where url='你要访问的api地址', 定制返回结果
最后复制Endpoint里面的链接大概是这样https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20urlles.org%2Falltableswithkeys
最后, 把得到的链接地址复制到自己的js里面去执行就能正确拿到json
例
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20urlles.org%2Falltableswithkeys", function (data) { console.log(data); });
到这就结束了, 已经能在控制台输出结果了
这个解决方案不好的一点就是又通过了一次yql, 等于是yql先拿到结果, 然后又到浏览器, 中转了一次, 好的一点是不用自己再去动服务器代码
友情赞助
如果您喜欢此文,感觉对您工作有帮助,预期领导会给您涨工资,不妨小额赞助一下,让我有动力继续努力。
赞助方式:打开支付宝App,使用“扫一扫”付款,付款码见下图,别忘了付款留言哦!
或使用微信, 不用加好友就能付款
相关文章推荐
- 如何使用Fiddler实现跨域访问(把自己做的静态HTML页面域名变成api.bing.com)
- 如何使用Fiddler实现跨域访问(把自己做的静态HTML页面域名变成api.bing.com)
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- js如何实现跨域访问
- 如何使用HttpsURLConnect和HttpClient实现访问https
- 使用CORS(跨站资源共享Cross-Origin Resource Sharing) 来实现跨域访问
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- 如何使用 RBAC 组件实现访问控制
- JavaScript如何实现跨域访问(CORS)?
- 使用ASP.Net创建代理实现Javascript跨域访问
- [Access-Control-Allow-Origin]Web中使用filter实现跨域访问问题
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- 使用UserLock如何实现工作站登陆访问限制
- JSP页面如何访问标签中定义的变量-使用实现
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- FleaPHP 开发指南 - 8. 如何使用 RBAC 组件实现访问控制
- [原创]java WEB学习笔记55:Struts2学习之路---详解struts2 中 Action,如何访问web 资源,解耦方式(使用 ActionContext,实现 XxxAware 接口),耦合方式(通过ServletActionContext,通过实现 ServletRequestAware, ServletContextAware 等接口的方式)