【跨域解决方案之JSONP】

分享人:姚磊

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是同源政策?

设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么? 很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态, 如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。 由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

1995年,网景公司将同源策略这一安全策略引入浏览器,规定不同的‘域’之间的数据相互不可访问。

什么算是同源?

同一协议,同一域名,同一端口

举例来说,http://www.example.com/dir/page.html这个网址,协议是http://, 域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下:

http://www.example.com/dir2/other.html:同源
http://example.com/dir/other.html:不同源(域名不同)
http://v2.www.example.com/dir/other.html:不同源(域名不同)
http://www.example.com:81/dir/other.html:不同源(端口不同)

请求不同‘源’的数据就算是跨域。

2.知识剖析

实现跨域的常见方法有以下几种

1.nginx反向反向代理
2.JSONP跨域
3.通过修改document.domain来跨子域
等等

JSONP就是为了便于客户端使用数据,
逐渐形成了的一种非正式传输协议,人们把它称作JSONP

3.常见问题

JSONP实现跨域原理?
代码中如何实现?

4.解决方案

JSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。 JSONP实现跨域请求的原理简单的说,就是动态创建'script'标签,然后利用'script'的src 不受同源策略约束来跨域获取数据。 JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

5.编码实战

6.扩展思考

JSONP跨域有什么优缺点?

优点:兼容性很好好,可以在古老的浏览器中运行,

缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求。

7.参考文献

参考一 :  好评率超高的博客文章


参考二 :  软某峰—浏览器同源政策及其规避方法

8.更多讨论

鸣谢

感谢大家观看

BY : 姚磊 | someone