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.html 和http://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。