熟悉又陌生的跨域访问与CORS

说到跨域访问,是既熟悉又陌生，熟悉是因为只要做过web项目，尤其是前后端分离的项目，都碰到过ajax跨域访问的麻烦，跨域访问就如字面意思，只要协议、域名、端口有任何一个不同，都被当作是不同的域。对于跨域访问，是有限制的;陌生的是，很多跨域无法访问的问题只能一味网上找解决方案，而不知道跨域乃至CORS的原理，配置出了问题不知道如何下手， 所以这次记录一下彻底解决下跨域的问题。

为什么要有跨域限制

拒绝其它域名的访问想想理由也很简单，如果没有跨域访问限制，别人拿你的cookie伪造你的身份，任何人都能伪造请求，安全性会出现问题。

CORS跨域资源共享

如果要放开限制，可以采用CORS跨域资源共享,CORS 基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。JSONP方案我没用过，听说有限制，不如CORS。

CORS 在后端的设置主要在于检查 请求头，检查的内容包括但不限于

• Origin：请求源：发送请求的服务器域名
• Methods：请求方式：如POST,GET
• Headers：可以携带的请求头信息：包括 “Content-Type”，“Origin“，”Accept“ 等
• Credentials：可否携带cookies

具体的检查代码：

@Component
public class CorsFilter implements Filter {

    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;

        HttpServletRequest reqs = (HttpServletRequest) req;
		//检查Origin是否符合，因为这里直接取的 请求头的Origin地址，所以相当于不限制请求源是哪里
        response.setHeader("Access-Control-Allow-Origin", reqs.getHeader("Origin"));
        //这里设置服务器允许带cookie
        response.setHeader("Access-Control-Allow-Credentials", "true");
        //这里设置服务器允许POST, GET, OPTIONS, DELETE四种请求Method来请求
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        //这里设置服务器允许额外携带的请求头Origin, header1, header2, header3, X-Requested-With, Content-Type, Accept等字段
        response.setHeader("Access-Control-Allow-Headers", "Origin, header1, header2, header3, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    }

    @Override
    public void destroy() {
    }
}

CORS跨域访问分两种情况：

第一种情况

：如果Content-Type是application/x-www-form-urlencoded, multipart/form-data, 或者 text/plain，或者请求方法不是PUT或DELETE，则是普通情况处理
下图是普通情况跨域的请求和返回信息：

发送的Request Header除了常见的，额外的就是”Origin“字段；后台也会返回Access-Control-Allow-Origin的设置值，浏览器发现Origin字段不在Access-Control-Allow-Origin的设置值范围内，那就会报错，跨域访问就会失败。

第二种情况

前面说到，如果Content-Type是application/x-www-form-urlencoded, multipart/form-data, 或者 text/plain，或者请求方法不是PUT或DELETE，则是普通情况处理；


那相反的，如果Content-Type不是application/x-www-form-urlencoded, multipart/form-data, 或者 text/plain，比如application/json，或者请求方法是PUT或DELETE，就会在正式访问前增加一次HTTP OPTIONS查询请求，大白话就是浏览器会先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP Method和头信息字段（Headers）。只有得到肯定答复，浏览器才会发出正式的请求，否则就报错。

jquery的ajax文档中也有类似描述

那我们再看下第二种情况下 跨域的请求和返回信息：

截图的是OPTIONS请求，后面正式的请求跟普通情况下的无异，就不讨论。OPTIONS请求你会发现多了两个Access-Control-Request-Methods和Access-Control-Request-Headers。这两个内容跟后台设置的Access-Control-Allow-Methods和Access-Control-Allow-Headers匹配

图中返回信息的Allow就是服务器返回的支持的方法。特别也要注意Access-Control-Allow-Headers的设置，在之前的一个项目中，我就是因为后台在设置Access-Control-Allow-Headers的时候，没有加上”Content-Type“，导致当前台传的Access-Control-Request-Headers带有”Content-Type“的时候，游览器会因为匹配不上而报错。

结语

以上就是跨域和CORS流程的梳理，知己知彼，百战百胜，只有了解机制才能方便我们在跨域访问时早点定位问题所在。在这里再推荐一篇文章，对于跨域和CORS有更细致的讲解，特分享给大家：

http://www.ruanyifeng.com/blog/2016/04/cors.html