文章目录

  1. 1. 跨域问题,解决之道
  2. 2. 解决思路
  3. 3. CORS涉及的响应头
    1. 3.1. Access-Control-Allow-Origin
    2. 3.2. Access-Control-Allow-Methods
    3. 3.3. Access-Control-Allow-Credentials
    4. 3.4. Access-Control-Max-Age
    5. 3.5. Access-Control-Allow-Headers
  4. 4. 解决跨域问题
  5. 5. 存在问题

跨域问题,在日常开发过程中,是一个非常熟悉的名词。之前有和大家讨论过《跨域问题,解决之道》,根据读者的反馈,希望讲解具体的实现方案,因此,这周会分享一些具体的实现方案。

跨域问题,解决之道

链接文章:跨域问题,解决之道

解决思路

CORS 全称为 Cross Origin Resource Sharing(跨域资源共享)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,但用户不会有感觉。因此,实现CORS通信的关键是服务端。服务端只需添加相关响应头信息,即可实现客户端发出 AJAX 跨域请求。

值得注意的是,浏览器必须先以 OPTIONS 请求方式发送一个预请求,从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。

CORS涉及的响应头

Access-Control-Allow-Origin

允许访问的客户端域名,例如:http://blog.720ui.com,若为星形标示号,则表示从任意域都能访问,即不做任何限制。值得注意的是,Access-Control-Allow-Origin 只允许两种取值,一个是星形标示号,一个是具体的域名,不支持同时配置多个域名。

Access-Control-Allow-Methods

允许访问的方法名,多个方法名用逗号分割,例如:GET,POST,PUT,DELETE,OPTIONS。

Access-Control-Allow-Credentials

是否允许请求带有验证信息,若要获取客户端域下的 cookie 时,需要将其设置为 true。

Access-Control-Max-Age

可以用于 CORS 相关配置的缓存。

Access-Control-Allow-Headers

允许服务端访问的客户端请求头,多个请求头用逗号分割,例如:Content-Type。

解决跨域问题

首先,我们需要编写一个 Filter,过滤所有的 HTTP 请求,将 CORS 响应头写入 response 对象中。

public class CORSFilter implements Filter {  
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, PATCH");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization, Cache-control");  
        chain.doFilter(req, res);  
    }  

    public void init(FilterConfig filterConfig) {}  

    public void destroy() {}  

}  

然后,在 web.xml 中配置 CorsFilter 的过滤器。

<filter>  
  <filter-name>corsFilter</filter-name>  
  <filter-class>com.lianggzone.core.filter.CorsFilter</filter-class>  
</filter>  
<filter-mapping>  
  <filter-name>corsFilter</filter-name>  
  <url-pattern>/*</url-pattern>  
</filter-mapping>  

完成上面两个步骤,即可实现跨域功能。这样跨多个域的问题就轻松解决了。

存在问题

不幸的是,CORS不支持IE8、IE9,如果产品不再考虑兼容IE低版本的话,可以忽略,但是如果产品需要兼容目前国内还存在大量低版本的IE市场(百分之二十多),那么这个需要慎重考虑咯。

(完)

微信公众号

文章目录

  1. 1. 跨域问题,解决之道
  2. 2. 解决思路
  3. 3. CORS涉及的响应头
    1. 3.1. Access-Control-Allow-Origin
    2. 3.2. Access-Control-Allow-Methods
    3. 3.3. Access-Control-Allow-Credentials
    4. 3.4. Access-Control-Max-Age
    5. 3.5. Access-Control-Allow-Headers
  4. 4. 解决跨域问题
  5. 5. 存在问题