Weitere ähnliche Inhalte
Ähnlich wie 你不知道的HTTP 之 跨域XHR (20)
你不知道的HTTP 之 跨域XHR
- 2. 作者
沉鱼
fool2fish@gmail.com
http://fool2fish.cn
- 5. 目录
• Ajax 结构
• 参考资料
• 简单请求
• Preflight 请求
• 带验证的请求
• 兼容性
- 6. Ajax 结构
Ajax
getScript jsonp Xhr
Same Cross
origin domain
Get post Get post
- 7. 参考资料
• 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)
- 8. • Cross-Origin Resource Sharing
(CORS)是W3c工作草案,它定义了在
跨域访问资源时浏览器和服务器之间
如何通信。CORS背后的基本思想是
使用自定义的HTTP头部允许浏览器和
服务器相互了解对方,从而决定请求
或响应成功与否。
- 10. 浏览器
• 对一个简单的请求,没有自定义头部,
要么使用GET,要么使用POST,它的
Content-type为text/plain,请求会发送
一个名叫Orgin的额外的头部。
例:Origin: http://fool2fish.cn
Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
- 11. 服务器
• 如果服务器确定请求被通过,它将发
送一个Access-Control-Allow-Origin头
部响应发送请求的同一个源,如果是
一个公共资源,则返回“*”。
例:Access-Control-Allow-Origin:
http://fool2fish.cn
Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
- 13. • FF3.5 +,Safari 4和chrome通过使用
XMLHttpRequest对象支持其使用。在
IE8中也是一样,用同样的方式你需要
使用XDomainRequest对象。
Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
- 15. 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
- 16. 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
- 17. • preflighted 请求一旦作出,结果将按
响应中规定的时间缓存下来;第一次
做出这样的请求,你将引发一次额外
的HTTP请求。
• Firefox 3.5+, Safari 4+和Chrome都支
持preflighted 请求,IE8则不支持。
Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
- 19. Browser
• 默认状态下,跨域请求不提供证书
(cookie、HTTP身份验证、客户端SSL
证书)。你可以规定一个请求应该通过设
置withCredentials属性为true来发送证书。
如果服务器允许credentialed请求,那么
它将用下面的头部作出响应:
例:Access-Control-Allow-Credentials: true
Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
- 20. Server
• 如果一个credentialed请求被发送,而
这个头部没在响应头中相应的返回,
浏览器不会将响应传递给
JavaScript(responseText是一个空字
符串,状态为0,onerror()被调用)。
Refer: Cross-domain Ajax with Cross-Origin Resource Sharing - ncz
- 22. 兼容性
ie6 ie7 ie8 ie9 chrom firefox safari
e
xd xhr no no XDom yes yes yes yes
ainReq
uest
withCredentia no no no yes yes yes Yes
ls
solution swf swf swf xhr xhr xhr xhr