Web跨域问题总结

昨天测试一个网页联调问题时发送请求总是发送不成功,因为时IE8环境提示很有限,后来无奈开启IE调试模式发现报错信心时"no Transtport",结合实际环境想到原来时跨域问题造成的。为此想总结一下Web跨域问题。

一、跨域问题的由来
为了防止某些文档或脚本加载别的域下的未知内容造成泄露隐私,破坏系统等安全行为,1995年, Netscape 公司在浏览器中引入同源策略/SOP(Same origin policy),它是浏览器最核心也最基本的安全功能,对Web访问做了两种限制:
1、不能通过ajax的方法或其他脚本中的请求去访问不同源中的文档。
2、浏览器中不同域的框架之间是不能进行js的交互操作的。
引入SOP的初衷是为了Web安全,但实际使用中,正常合理的跨域请求也会遭到限制,由此产生了跨域问题。

二、怎么算跨域(同源的定义)
两个URL的协议,域名(主机名、IP)和端口都相同则认为是同源,否则有任一个不同则认为跨域。

Paste_Image.png

IE有例外:授信范围(Trust Zones):两个相互之间高度互信的域名,如公司域名(corporate domains),不遵守同源策略的限制。IE未将端口号加入到同源策略的组成部分之中,因此 http://company.com:81/index.htmlhttp://company.com/index.html 属于同源并且不受任何限制。

三、常见跨域问题解决方
要解决浏览器跨域请求问题,必须要服务器端支持,如果服务器本身限制不允许跨域访问,则无法实现。
1、JSONP

Paste_Image.png

同源策略下,某个服务器是无法获取到服务器以外的数据,但是html里面的img,iframe和script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。
JSONP就是通过script节点src调用跨域的请求。当我们向服务器提交一个JSONP的请求时,我们给服务传了一个特殊的参数,告诉服务端要对结果特殊处理一下。这样服务端返回的数据就会进行一点包装,客户端就可以处理。如下图:

Paste_Image.png

特点:JSONP跨域方式只需要服务端支持即可,简单方便,但它只支持GET的方式提交,不支持其他Post的提交,Get方式对请求的参数长度有限制,在有些情况下可能不满足要求。

2、CORS

Paste_Image.png

CORS(跨域资源共享,Cross-Origin Resource Sharing)是通过客户端+服务端协作声明的方式来确保请求安全的。服务端会在HTTP请求头中增加一系列HTTP请求参数(例如Access-Control-Allow-Origin等),来限制哪些域的请求和哪些请求类型可以接受,而客户端在发起请求时必须声明自己的源(Orgin),否则服务器将不予处理,如果客户端不作声明,请求甚至会被浏览器直接拦截都到不了服务端。服务端收到HTTP请求后会进行域的比较,只有同域的请求才会处理,并在响应头中增加允许域信息,浏览器检查响应头中允许域是否正常,若不正常就限制输出。
特点:需要浏览器客户端、服务端同时支持,有兼容性问题(IE8就通过XDR只实现了CORS的部分规范,只支持GET/POST形式的请求。另外只支持 http 和 https )。浏览器支持情况如下图:

Paste_Image.png

注意,跨域请求始终是网页安全中一个比较头疼的问题,CORS提供了一种跨域请求方案,但没有为安全访问提供足够的保障机制,如果你需要信息的绝对安全,不要依赖CORS当中的权限制度,应当使用更多其它的措施来保障,比如OAuth2。

3、其它不常用方式
WebSocket、ifream、服务器代理、flash socket。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 欢迎关注微信公众号:全栈工厂 本文主要参考跨域资源共享 CORS 详解[http://www.ruanyifeng...
    liqingbiubiu阅读 5,929评论 0 3
  • 前言:对于跨域请求,很早之前就有去了解过,但因为一直关注的都是服务器后端开发,故也就仅仅停留在概念的理解上而没有机...
    ken_ljq阅读 90,064评论 6 128
  • 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的“跨域问题”。作为前端开发,解决跨域...
    SCQ000阅读 7,397评论 1 52
  • 一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视...
    徐国军_plus阅读 4,312评论 1 3
  • 前言 对于Bug相信对于所有的开发者而言都是噩梦,没有一个app是完美的,尤其是android开发需要适配的版本太...
    Smile__EveryDay阅读 21,574评论 3 18