JSONProxy – 获取跨域json数据工具

作者:信息技术

JSONProxy – 获取跨域json数据工具

2015/07/10 · JavaScript · JSON, JSONProxy

原文出处: 韩子迟   

JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”。当你苦于无法跨域获取json数据时,不妨一试,说不定能事半功倍。

比如这位朋友,想通过ajax获取必应的每日一图的url(是否可以通过ajax获取“Bing每日一图”?)很显然,这个ajax是跨域的,直接获取会因为跨域报错;服务端也肯定不会有对你本地localhost的“Access-Control-Allow-Origin”的设置,所以CORS策略也是不行的;因为是个json数据,没有方法名包裹,所以jsonp也是不行。楼主暂时还没接触过其他的跨域方法,如果要我去获取url,只能通过服务端的代码,服务端去获取json数据,然后index页面去ajax请求服务端获取的json数据(此时index页面和服务端同源),代码量增加,而要做的仅仅只是获取一个json数据啊!这时JSONProxy就帮你做好了服务端的工作,是不是很爽!

跨域:掘金地址——

  • 原文:九种跨域方式实现原理

Easy: JSONP

原生的JavaScript:

XHTML

<script> function myCallback(data){ console.log(data); } </script> <script src=";

1
2
3
4
5
6
<script>
  function myCallback(data){
    console.log(data);
  }
</script>
<script src="https://jsonp.afeld.me/?callback=myCallback&url=http://jsonview.com/example.json"></script>

myCallback函数里的data就是返回的json数据了。很显然,服务器会帮你去请求你需要的json数据,然后包裹在你设置的回调函数名中,这时要注意的代码中的红色两处要保持一致,url后跟的就是需要的json数据地址。

当然JQuery封装好的方法更加简单:

XHTML

<script> $.getJSON('', function(data){ console.log(data); }); </script>

1
2
3
4
5
<script>
  $.getJSON('https://jsonp.afeld.me/?callback=?&url=http://jsonview.com/example.json', function(data){
    console.log(data);
  });
</script>

另一篇学习地址:

Fundebug经授权转载,版权归原作者所有。

Easier: Cross-domain AJAX (CORS)

比jsonp更简单的方法是CORS(好吧,也没简单到哪去啊…)

XHTML

<script> $.get('', function(data){ console.log(data); }); </script>

1
2
3
4
5
<script>
  $.get('https://jsonp.afeld.me/?url=http://jsonview.com/example.json', function(data){
    console.log(data);
  });
</script>

这回是真正地发送了ajax请求了,为什么跨域了还能请求?因为服务端设置好了。

图片 1

而请求的json数据也是服务端帮你获取的。也就是说,客户端发送请求,服务端解析请求的url,然后服务器作为代理发送http请求去请求json数据(这时不存在客户端跨域),再返回给客户端作为回调的参数。

讲的比较细:
跨域笔记
    有些东西不要太较真,因为没啥用

前言

前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。

本文完整的源代码请猛戳GitHub博客,纸上得来终觉浅,建议动手敲敲代码

Easiest: jQuery Plugin

最简单的,我怎么感觉越来越复杂了…

略…

总结,因为要用第三方的服务器,所以既耗时又有不确定因素(比如服务器挂了),不合适用在真正项目中,自己玩玩尚可。

1 赞 收藏 评论

图片 2

    jsonp和cors知道就好,其他的了解一下就好
  同源:是指同域名(主域名与二级域名,即子域名),同协议,同端口。是浏览器的一种最核心最基本的安全策略。

一、什么是跨域?

    1."同源策略",即同域名(domain或ip)、同端口、同协议的才能互相获取资源,而不能访问其他域的资源。

1. 什么是同源策略及其限制内容?

同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

图片 3

  • Cookie、LocalStorage、IndexedDB 等存储性内容

    • AJAX 请求不能发送

但是有三个标签是允许跨域加载资源:

  • <img src=XXX>

  • <link href=XXX>

  • <script src=XXX>

图片 4
    2.jsonp跨域方式,就是利用script的src来变相发送get请求,在链接里会发送一个函数名,而json数据作为
函数的参数被回调函数传递过来再解析应用。

2. 常见跨域场景

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。常见跨域场景如下图所示:

图片 5

第一:如果是协议和端口造成的跨域问题“前台”是无能为力的。

第二:在跨域问题上,仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配”。

这里你或许有个疑问:请求跨域了,那么请求到底发出去没有?

跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求,为什么 Ajax 就不会?因为归根结底,跨域是为了阻止用户读取到另一个域名下的内容,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应。但是表单并不会获取新的内容,所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF,因为请求毕竟是发出去了。

本文由杏彩发布,转载请注明来源

关键词: