vue + axios get 请求header后出现跨域错误

   this.$axios({
        method: "get",
        url: "http://localhost:8080/api/user/selectAll",
        headers: {
          token: this.$store.state.token
        },
      })

当我们写前后分离项目的时候需要添加拦截器需要配置token,配置好之后就会如下,出现跨域问题,明明什么都对,但就是找不到问题所在,后来我通过百度发现问题所在当我们在自定义请求头的时候,浏览器浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域）

这里请求头里也是有咱们写的请求头

但是在浏览器中运行就会报跨域异常

这就要说到OPTIONS

如果自定义了请求头跨域请求就会变成复杂请求

跨域请求有分为简单请求和复杂请求；一般情况下在不添加请求头的时候是简单请求,如果添加了话就是复杂请求,

在发出复杂请求的之前，就会出现一次OPTIONS请求。
OPTIONS请求可以被称作一次嗅探请求，通过这个方法，客户端可以在采取具体的资源请求之前，决定对资源采取何种必要措施。
由于我的问题出现在请求内容为json的时候，所以是复杂请求，提前进行了一次OPTIONS请求。
这个OPTIONS请求中没有增加我们的Authorization请求头，所以就无法通过我们的网关，在网管的地方被拦截下来了，返回了401
所以我们就要在后端的拦截器中添加如下代码

  if(request.getMethod().equals(RequestMethod.OPTIONS.name()))
        {
            response.setHeader("Access-Control-Allow-Origin","*");
            response.setHeader("Access-Control-Allow-Headers","*");
            response.setHeader("Access-Control-Allow-Methods","*");
            response.setHeader("Access-Control-Allow-Credentials","true");
            response.setHeader("Access-Control-Max-Age","3600");
            response.setStatus(HttpStatus.OK.value());
            return true;
        }

目前的项目中，不需要考虑的太复杂，简单处理就是放行OPTIONS请求。

这是我自己在项目中实际遇到的问题,百度解决的.然后总结写的一篇文章

有错误的地方请指出