前后端分离中获取不到请求头中的token

前后端分离中获取不到请求头中的token

在登录后，将token信息放入localStorage中：

login: function () {
    axios.post(`http://localhost:9001/user/login`, this.loginData).then((response) => {
        window.localStorage.setItem("token", response.data.data.token)
    });
}

在另一个页面查询分类列表时，将请求头加上token

//axios全局配置
axios.defaults.headers['token'] = window.localStorage.getItem("token");
findCategoryList() {
    axios.get(`http://localhost:9001/productCategory/findAll`).then(response => {
        this.categoryList = response.data;
    })
}

但是发现失败了：

​ OPTIONS请求401，另一个则也出现跨域，headers中的token已经加上了

于是乎，查看登录拦截器的打印信息，发现并没有获取到token，后端也是允许跨域的

//登录拦截器
public class AuthInterceptor extends HandlerInterceptorAdapter {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {

        //放行登录请求
        if (request.getRequestURI().contains("/user/login")) {
            return true;
        }

        //取出请求头中的token
        String token = request.getHeader("token");
        System.out.println("token: " + token);
        if (StringUtils.isEmpty(token)) {
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            return false;
        }

        //解析token
        try {
            JwtUtil.parseJWT(token);
        } catch (Exception e) {
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            e.printStackTrace();
            return false;
        }
        return true;
    }
}

/**
 * 全局跨域解决
 */
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").
                allowedOrigins("*"). //允许跨域的域名，可以用*表示允许任何域名使用
                allowedMethods("*"). //允许任何方法（post、get等）
                allowedHeaders("*"). //允许任何请求头
                allowCredentials(true). //带上cookie信息
                exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L); //maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
    }
}

查询资料发现，查询请求发出前的OPTIONS请求是检查服务器是否支持跨域请求的，它并没有带上headers中的token信息，所以后台在接到OPTIONS请求后获取不到token信息，直接返回了。所以前端也出现跨域情况。

解决方案：

只需要放行OPTIONS请求即可

		//放行登录请求
        if (request.getRequestURI().contains("/user/login")) {
            return true;
        }

        //放行OPTIONS请求
        String method = request.getMethod();
        if ("OPTIONS".equals(method)) {
            return true;
        }

        //取出请求头中的token
        String token = request.getHeader("token");
        System.out.println("token: " + token);
        if (StringUtils.isEmpty(token)) {
            response.setStatus(HttpStatus.UNAUTHORIZED.value());
            return false;
        }