介绍一个JSONP 跨域访问代理API-yahooapis

简介:

 

你是否遇到了想利用AJAX访问一些公网API,但是你又不想建立自己的代理服务,因为有时我根本就没打算涉及服务端任何代码,但是讨厌的浏览器的三原策略,阻止了我们的ajax调用。

比如我想访问一个天气的restfull api,如果我直接去GET

 $.get("http://m.weather.com.cn/data/101010100.html");

 

    看见这问题相信大家都不会陌生,也会很自然的得到解决方案,但是我这里真的不想touch任何服务端代码,用jsonp吧,但是服务端没实现契约。

在这里我是时候引入主角yahoo提供的jsonp代理:http://query.yahooapis.com/v1/public/yql

实现跨域访问代码为:http://jsfiddle.net/whitewolf/4UDpf/9/

html:
< script  type ="text/javascript"  src ="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js" ></ script >
< div  id ="content" >
    

</div>

js:
$( function(){
    $.getJSON("http://query.yahooapis.com/v1/public/yql", {
    q: "select * from json where url=\"http://m.weather.com.cn/data/101010100.html\"",
    format: "json"
},  function(data) {
     var $content = $("#content")
     if (data.query.results) {
        $content.text(JSON.stringify(data.query.results));
    }  else {
        $content.text('no such code: ' + code);
    }
});

});

效果:

 

      多的就不用说了,jsonp原理我相信大家也很清楚。 



 本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/1075681,如需转载请自行联系原作者


相关文章
|
3月前
|
JSON 应用服务中间件 API
利用Grafana的API Key+Nginx反向代理实现Grafana免登录访问
利用Grafana的API Key+Nginx反向代理实现Grafana免登录访问
87 1
|
6月前
|
安全 Java API
解决 Swagger API 未授权访问漏洞:完善分析与解决方案
Swagger 是一个用于设计、构建、文档化和使用 RESTful 风格的 Web 服务的开源软件框架。它通过提供一个交互式文档页面,让开发者可以更方便地查看和测试 API 接口。然而,在一些情况下,未经授权的访问可能会导致安全漏洞。本文将介绍如何解决 Swagger API 未授权访问漏洞问题。
|
1月前
|
存储 分布式计算 API
adb spark的lakehouse api访问内表数据,还支持算子下推吗
【2月更文挑战第21天】adb spark的lakehouse api访问内表数据,还支持算子下推吗
107 2
|
1月前
|
数据采集 JavaScript API
第三方系统访问微搭低代码的后端API
第三方系统访问微搭低代码的后端API
|
2月前
|
Java API Maven
Springboot快速搭建跨域API接口(idea社区版2023.1.4+apache-maven-3.9.3-bin)
Springboot快速搭建跨域API接口(idea社区版2023.1.4+apache-maven-3.9.3-bin)
33 0
|
3月前
|
安全 API 网络安全
Github不再支持基于密码的API访问
Github不再支持基于密码的API访问
41 0
|
4月前
|
Kubernetes API 网络架构
k8s学习-CKS真题-启用API Server认证,禁止匿名访问
k8s学习-CKS真题-启用API Server认证,禁止匿名访问
65 0
|
4月前
|
API Windows
解决echarts.apache.org官网不能访问的问题(主要是用于查看配置项API参数细节说明)
解决echarts.apache.org官网不能访问的问题(主要是用于查看配置项API参数细节说明)
|
4月前
|
JSON API 数据格式
拼多多根据ID取商品详情 API 是否支持移动端访问?
API的URL和端口 拼多多根据ID取商品详情 API 的URL和端口与计算机端相同,您可以使用相同的URL和端口在移动设备上发送请求。请确保您的移动设备可以连接到互联网,并且可以访问拼多多的API服务器。
|
5月前
|
API
Openlayers+vue调用GeoServer的api报跨域错误解决方法
Openlayers+vue调用GeoServer的api报跨域错误解决方法

热门文章

最新文章