Home • Slides • About • Tags

跨域资源共享CORS

Cross-origin resource sharing (CORS)跨域资源共享是指允许其他域发起网页请求资源（字体/JavaScript等）机制，该域和资源所在域不同

因为在web应用Cross-site scripting (XSS)会引发电脑安全问题，所以跨域的AJAX请求默认是屏蔽的，具体XSS介绍可以参考维基

如何工作

CORS的标准描述了新的HTTP消息头，它提供浏览器和服务器当他们有权限时访问远程资源。虽然服务器可以执行某些验证和授权，但是通常是浏览器负责这些消息头解析施加限制

示例

当支持CORS浏览器发送跨域请求时

  • 浏览器发送带有Origin消息头的请求，Origin值为该页面所在的域。如一个http://www.foo.com下的页面尝试访问在bar.com上的用户数据，那么请求的消息头如下

    Origin: http://www.foo.com

  • 服务端响应

    • 响应Access-Control-Allow-Origin消息头会指明允许哪些域访问

      Access-Control-Allow-Origin: http://www.foo.com

    • 如果服务不允许跨域请求则返回错误页面

    • 设置值为*表示允许所有域访问

      Access-Control-Allow-Origin: *

浏览器支持版本

FireFox3.5+/Chrome3+/Safari4+/IE8&9部分支持/IE10+

如何判断浏览器是否支持CORS，可以使用Modernizr进行判断

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/cors.js

define(['Modernizr'], function( Modernizr ) {
  Modernizr.addTest('cors', 'XMLHttpRequest' in window && 'withCredentials' in new XMLHttpRequest());
});

如何解决

  • 从浏览器上处理，以Chrome为例，在启动时添加参数--disable-web-security，屏蔽该策略限制，如图

  • 从服务器上处理，以Tomcat7为例，设置过滤器去修改相应消息头，该过滤器需要求Tomcat7.0.41+，CORS_Filter(http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter)

    CorsFilter org.apache.catalina.filters.CorsFilter CorsFilter /*
Written by

huang.xinghui

Programmer

huang-x-h huangxinghui

Published

Supported by