跨域 XHR你不知道的 HTTP

RDSS 小组2012-04

作者

沉鱼fool2fish@gmail.comhttp://fool2fish.cn

关于RDSSResearch on Domain Specific Solution

我们致力于已有的规范、解决方案、产品等研究并实践到工作中

演示http://

fool2fish.aliapp.com/rdss/http/xhr.html

服务器端源码http://fool2fish.aliapp.com/rdss/http/server.js

目录• Ajax 结构• 参考资料• 简单请求• Preflight 请求• 带验证的请求• 兼容性

Ajax 结构

Ajax

getScript jsonp Xhr

Same

origin

Get

post

Cross

domain

Get

post

参考资料• Cross-Origin Resource Sharing – w3c• Cross-domain Ajax with Cross-Origin

Resource Sharing - ncz

• HTTP access control (CORS) – mdn• http://arunranga.com/examples/acces

s-control/ (demo)

• Cross-Origin Resource Sharing (CORS) 是 W3c 工作草案，它定义了在跨域访问资源时浏览器和服务器之间如何通信。 CORS 背后的基本思想是使用自定义的 HTTP 头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否。

简单请求

浏览器• 对一个简单的请求，没有自定义头部，

要么使用 GET ，要么使用 POST ，它的 Content-type 为 text/plain, 请求会发送一个名叫 Orgin 的额外的头部。

例： Origin: http://fool2fish.cn

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

服务器• 如果服务器确定请求被通过，它将发

送一个 Access-Control-Allow-Origin头部响应发送请求的同一个源，如果是一个公共资源，则返回“ *” 。

例： Access-Control-Allow-Origin: http://fool2fish.cn

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

• 注意，请求和响应都不包括 cookie 信息。

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

• FF3.5 + ， Safari 4 和 chrome 通过使用 XMLHttpRequest 对象支持其使用。在 IE8 中也是一样，用同样的方式你需要使用 XDomainRequest 对象。

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

Preflight 请求

Browser• 除了 GET 或 POST ，通过一种称之为

preflighted 请求的服务器透明验证机制，CORS 允许使用自定义的头部和方法，以及不同主体内容类型。当你尝试使用高级选项中的一个来试着建立一个请求时，这时就建立了一个 preflighted 请求。该请求使用可选的方法，并发送如下头部：– Origin– Access-Control-Request-Method– Access-Control-Request-Headers

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

Server• 在请求期间，服务器能决定是否允许

这类请求。服务器通过在响应中发送以下头部来与浏览器通信。

– Access-Control-Allow-Origin– Access-Control-Allow-Methods– Access-Control-Allow-Headers– Access-Control-Max-Age

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

• preflighted 请求一旦作出，结果将按响应中规定的时间缓存下来；第一次做出这样的请求，你将引发一次额外的 HTTP 请求。

• Firefox 3.5+, Safari 4+ 和 Chrome 都支持 preflighted 请求， IE8 则不支持。

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

带验证的请求

Browser• 默认状态下，跨域请求不提供证书

（ cookie 、 HTTP 身份验证、客户端SSL 证书）。你可以规定一个请求应该通过设置 withCredentials 属性为 true 来发送证书。如果服务器允许 credentialed请求，那么它将用下面的头部作出响应：

例： Access-Control-Allow-Credentials: true

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

Server• 如果一个 credentialed 请求被发送，

而这个头部没在响应头中相应的返回，浏览器不会将响应传递给JavaScript(responseText 是一个空字符串，状态为 0 ， onerror() 被调用 ) 。

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

• IE8 不支持 withCredentials 属性， irefox 3.5+, Safari 4+ 和 Chrome都支持它。

Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz

兼容性ie6 ie7 ie8 ie9 chrom

efirefox safari

xd xhr no no XDomainRequest

yes yes yes yes

withCredentials

no no no yes yes yes Yes

solution swf swf swf xhr xhr xhr xhr