跨越解决方案之JSONP

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能。

本篇分享的是：跨越解决方案之JSONP

 

大家好，我是IT修真院北京分院杨纲，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

所有支持Javascript的浏览器都会使用同源策略这个安全策略。导致我们无法直接访问非同源的链接，无法取得非同源的数据，但在项目中我们的数据经常写在另一个源中，于是我们需要突破同源限制，取得其他源的数据，这就叫跨域。

2.知识剖析

常见的跨域方法有:

jsonp,利用了src属性可以跨域的特性

document.domain跨子域

Access Control,服务器端发送Access-Control-Allow-Origin响应头，规定请求的域名的访问权限

nginx反向代理，客户端nginx拦截代码中虚假的http请求，替换成正确的http

如何算不同的域？

不同域名

同一域名，不同端口

同一域名，不同协议

域名和域名对应ip

主域相同，子域不同

同一域名，不同二级域名

3.常见问题

JSONP是如何实现跨域的

4.解决方案

有两个文件处于不同域中：

A.html

 

B.js

结果会alert“success”，这就是jsop的基本原理

5.编码实战

DEMO

6.扩展思考

JSONP跨域有什么优缺点？

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

jsonp和ajax有什么关系？

ajax是通过操作XMLHttpRequest对象发送请求，获取返回的数据。JSONP的全称为JSON with Padding，Padding 指的就是包裹在JSON 外层的回调函数。从刚才的例子中，咱们发现JSONP并没有操作XMLHttpRequest，因此jsonp和ajax没有任何关系。

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

如何用 JQUERY 实现 JSONP

 

这里使用了ajax这个方法，但实际上jsonp和ajax没有任何关系，只是因为jsonp请求和ajax请求相似，jquery在这里有误导之嫌。

7.参考文献

参考一：跨域资源共享 CORS 详解

参考二：5 分钟彻底明白 JSONP

参考三：深入浅出JSONP--解决ajax跨域问题

8.更多讨论

感谢观看

BY : 肖浩宇|杨刚

问：nginx反向代理是什么：

答：通过配置欺骗浏览器绕过跨域的一种方式，

问：nginx和jonsp有什么区别？

答：jonsp是利用同源策略不限制src跨域而实现的一种跨域访问数据。

问：还有那些跨域方法？

答：document.domain跨子域

Access Control,服务器端发送Access-Control-Allow-Origin响应头，规定请求的域名的访问权限

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~