前后端分离项目出现No ‘Access-Control-Allow-Origin‘ header 跨域问题

我真不愧是，踩坑小天才。
话不多说上正餐

踩坑

什么坑

问题逻辑大概是

1. 前端访问接口
2. 拦截器校验请求信息，校验token失败时抛出一个自定义异常
3. 后端异常拦截捕获异常，并返回一个唯一code码，提示登录超时
4. 前端就收到了这个问题：

Access to XMLHttpRequest at 'http://ip1:port1/method' from origin
 'http://ip2' has been blocked by CORS policy:
 No 'Access-Control-Allow-Origin' header is present on the request resource

5. 通过postman或者swwager等直接加上token访问接口能获得数据
6. 而且token正常时不走异常则不会抛出跨域

爬坑

一个前后端分离项目，不可避免的要涉及到跨域。

跨域

先简单解释一下什么跨域

这不得不提一下同源策略，简单来说就是一种安全机制，阻止不同源的资源进行交互可以有效的提高项目的安全。

同源则是protocol、port 和 host 也就是说协议/主机/端口元组三个条件都相同才能视为同源，否则会发生跨域问题

配置

大体的解决方式有：

1.前端配置jsonp

2.前端配置cors

3.nginx反向代理

4.在后端配置cors

• 在过滤器中配置
• 在拦截器中配置

检查一下我在项目中使用的在拦截器中配置cors

    /**
     * 跨域设置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .allowedMethods("GET","POST","DELETE","PUT","PATCH","OPTIONS")
                .maxAge(3600);
    }

拦截token校验大概模拟一下代码：

然后有一个全局异常拦截类捕获异常，并区分是否是登录超时。

解决方式

尽管后台跨域配置已经添加，但是前端一直报这个请求头异常。

于是各种排查调试，再加上查资料，初步断定是拦截器在preHandle方法中抛出异常后，该请求没有走一个完整的流程结束，所以请求头的跨域配置没有添加，估计这也是使用拦截器实现跨域配置的一个弊端。

使用过滤器添加跨域配置

查询的资料中，这中方式能够避免该跨域问题，也是比较推荐的方式

添加请求头

这一种就是简单粗暴的方式，也是我采用的方式，既然该请求缺少了跨域的请求头，那我们就加上

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        System.out.println("-----------preHandle-----------");

        String token = request.getHeader("token");
        if(StringUtils.isEmpty(token)){
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "*");
            response.setHeader("Access-Control-Allow-Headers", "*");
            response.setHeader("Access-Control-Max-Age","3600");    //预检请求的有效期
            response.setHeader("Access-Control-Allow-Credentials", "true"); //请求中发送Cookie

           throw new LoginTimeoutException("登录超时！");
        }
        return true;
    }