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

浮夸小生。
2023-06-27 / 0 评论 / 103 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年06月27日,已超过392天没有更新,若内容或图片失效,请留言反馈。
   this.$axios({
        method: "get",
        url: "http://localhost:8080/api/user/selectAll",
        headers: {
          token: this.$store.state.token
        },
      })

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

这里请求头里也是有咱们写的请求头
Test
但是在浏览器中运行就会报跨域异常

这就要说到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请求。

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

有错误的地方请指出

0

评论 (0)

取消