跨域解决方案详解

概述

废话不想多讲，由于前篇整理了由前后端分离的3种方案，个人挑取了配置服务器的方案进行方案推进，结果数据是交互了，但是在header自定义token的cache上出了问题，自定义的header一直不能够传到server上。于是乎各种百度，google有了这篇帖子的衍生，学术不精，必须踩坑。

跨域请求CORS流程描述如下

这里写图片描述

OPTIONS验证服务器解决方案

在采用filter解决之前，查看了一些spring boot提供的cors提供的解决方案，在原理理解上一样，基本上为server端设置相应的header参数response给客户端来达到通信流程，如下code，filter”照顾”浏览器厂商CORS技术从而单独处理返回OPTIONS的验证header

public class DomainFilter  implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    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", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,X-XSRF-TOKEN");
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {

    }
}

总结

跨域终究还是浏览器衍生出来的问题，任何一门语言的http代理是木有的，一般出现场景都在浏览器的ajax请求中发生。我的理解，在出现跨域场景的时候，浏览器检测是跨域的请求，则会请求拆分为2，OPTIONS请求方式先行，为了验证服务器请求返回的header，允许的请求方式，允许传递的header等，这些参数都要在服务器端进行配置，相应的参数在http协议和浏览器之间交互完成之后，会报告是跨域不允许的交互，还是进行真实的2次交互。