因为axios请求后端，接收不到token的问引出的问题

vue axios请求后端接受不到token的问题。

相关概念

什么是跨域？

跨域指的是在浏览器环境下，当发起请求的域（或者网站）与请求的资源所在的域之间存在协议、主机或端口中的任何一个条件不同的情况。换句话说，只要协议、主机或端口中有一个不同，就会被认为是跨域请求。

具体来说，以下情况都属于跨域请求：

• 域名不同：例如从https://www.example.com向https://api.example.com发送请求。
• 端口不同：例如从https://www.example.com:8080向https://www.example.com:3000发送请求。
• 协议不同：例如从http://www.example.com向https://www.example.com发送请求。

axios请求后端接受不到token

具体看下面博客：

vue中axios发送OPTIONS预检请求的原因及如何通过_vue预请求_millet109的博客-CSDN博客

 后端接收不到前端传入的header参数信息 - 简书 (jianshu.com)

浅谈：

axios默认发的是复杂请求;而cors复杂请求；会先发一次options预请求，所以我们进行token

校验必须要先把第一次options请求过滤出去。

但是，这里又一个问题，我们通过springMvc设置跨域代买如下：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 注册 CORS 配置
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .allowedMethods("GET","POST","PUT","DELETE") // 注意就是要请求方式上，要改成全部
                .maxAge(3600);
    }
}

但其实我们自定义了一个filter，优先级在springmvc设置的跨域之上，因此，我们需在filter自定逻辑判断。

实例代码如下：

 // 1.排除options请求，防止报错
            if(!request.getMethod().equals("OPTIONS")){
                token = request.getHeader("Authorization").substring(6); // 没有token,这路为null
            }

            // 设置跨域
            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");