跨域问题，解决方案 - CORS方案

时间 2019-11-17

标签问题解决方案 cors 繁體版

原文原文链接

原文地址：跨域问题，解决方案 - CORS方案
博客地址：blog.720ui.com/javascript

跨域问题，解决之道

解决思路

CORS 全称为 Cross Origin Resource Sharing（跨域资源共享）。整个CORS通讯过程，都是浏览器自动完成，不须要用户参与。对于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，但用户不会有感受。所以，实现CORS通讯的关键是服务端。服务端只需添加相关响应头信息，便可实现客户端发出 AJAX 跨域请求。web

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

CORS涉及的响应头

Access-Control-Allow-Origin

容许访问的客户端域名，例如：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。cookie

解决跨域问题

首先，咱们须要编写一个 Filter，过滤全部的 HTTP 请求，将 CORS 响应头写入 response 对象中。app

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&lt;/filter-name>  
  <filter-class>com.lianggzone.core.filter.CorsFilter&lt;/filter-class>  
</filter>  
<filter-mapping>  
  <filter-name>corsFilter&lt;/filter-name>  
  <url-pattern>/*&lt;/url-pattern>  
</filter-mapping>复制代码

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

存在问题

不幸的是，CORS不支持IE八、IE9，若是产品再也不考虑兼容IE低版本的话，能够忽略，可是若是产品须要兼容目前国内还存在大量低版本的IE市场（百分之二十多），那么这个须要慎重考虑咯。

（完）

更多精彩文章，尽在「服务端思惟」微信公众号！