大家好,我是IT修真院北京分院第22期的学员杨纲,一枚正直纯洁善良的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.编码实战
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
8.更多讨论
感谢观看
BY : 肖浩宇|杨刚
问:nginx反向代理是什么:
答:通过配置欺骗浏览器绕过跨域的一种方式,
问:nginx和jonsp有什么区别?
答:jonsp是利用同源策略不限制src跨域而实现的一种跨域访问数据。
问:还有那些跨域方法?
答:document.domain跨子域
Access Control,服务器端发送Access-Control-Allow-Origin响应头,规定请求的域名的访问权限
ppt链接:https://ptteng.github.io/PPT/PPT/js-06-how to use jsonpyg.html
视频链接:https://pan.baidu.com/s/1bYX4tg 密码: 9fqb
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !