当前位置: 首页 > Web前端 > HTML

AJAX学习笔记2:XHR实现跨域资源共享(CORS)及与JSONP对比

时间:2023-04-02 17:37:20 HTML

1前言:首先对参考文章的作者表示感谢。你的经验总结给我们新手提供了太多的资源。本文致力于解决AJAX的CORS问题。我顺理成章地梳理了一下:首先系统总结了CORS问题的根源---同源策略;第二,介绍了JSONP这种跨域方式,只能支持GET请求和CORS进行对比;最后阐述了CORS的XHR解决方案和IE中的XDR解决方案,并在此基础上提供了创建跨浏览器HTTP请求对象的工具函数。2跨域问题的根源---同源策略在客户端编程语言中,如javascript和ActionScript,同源策略是一个非常重要的安全概念。其目的是保证用户信息的安全,防止恶意网站窃取数据。想象这样一种情况:一个网站是一家银行,用户登录后浏览其他网站。如果其他网站可以读取网站A的cookie会怎样?显然,如果cookie中包含隐私(比如存款总额),这些信息就会被泄露。更可怕的是cookie经常被用来保存用户的登录状态。如果用户不注销,其他网站就可以冒充用户为所欲为。因为浏览器也规定了提交表单不受同源策略的限制。可见“同源策略”是必须的,否则cookies可以共享,上网就一点都不安全了。那么什么是同域(同源),什么是异域(异源)呢?当两个域具有相同的协议(如http)、相同的端口(如80)、相同的主机(如www.example.org)时,我们就可以认为它们是同一个域。比如http://www.example.org/index....(默认端口号80可以省略)和http://www.example.org/sub/in...是同一个域,而http://www.example.org、https://www.example.org、http://www.example.org:8080、http://sub.example.org中的任意两个都构成跨域。注意:只有当协议、域名、端口号完全相同时,才是同域。其他情况下,连对应的IP和域名都是不同的域。具体情况如下:(忘记在哪引用了这张图,感谢作者),如果非同源,一共限制了三种行为。(1)无法读取Cookie、LocalStorage、IndexDB。(2)获取不到DOM。(3)AJAX请求无法发送。作为前端开发者,我们经常要做的就是突破这个限制。补充:同源策略还应该处理一些特殊情况,比如限制文件协议下脚本的访问权限。通过文件协议在浏览器中打开本地HTML文件。如果脚本可以通过文件协议访问硬盘上的任何其他文件,就会存在安全隐患。目前IE8仍然存在这样的风险。3跨域方法JS??ONP[参考文献1]JSONP是JSONwithPadding的缩写,是一种使用JSON实现服务端与客户端跨域通信的常用方法。最大的特点是简单适用,支持所有老式浏览器,服务器修改很小。其基本思想是网页通过添加元素,该元素向跨域URLsrc发送请求,其中包含一个回调函数window.onload=function(){addScriptTag('http://example.com/ip?callback=foo');}//回调函数的参数默认为返回的数据};/以上代码通过动态添加