页面接口访问正常,但是疯狂报tips的message请求,且接口有两次访问,其中一次没有返回值,原因是perflight预检请求

问题:

页面接口访问正常,但是疯狂报tips的message请求,且接口有两次访问,其中一次没有返回值,原因是perflight预检请求

追踪:

打开NetWork ,通常前端只看XHR,但是打开ALL后发现请求的接口会请求两次,
在这里插入图片描述
并且其中一个的 type 为perflight类型,打开 Headers 可以看到Request Method:OPTIONS
在这里插入图片描述

原因:

而这种请求称为预检请求(preflight),指的就是OPTIONS请求。它会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时,由浏览器自动发出。通过预检请求,浏览器能够知道当前的服务器是否允许执行即将要进行的请求,只有获得了允许,浏览器才会真正执行接下来的请求。
通常preflight请求不需要用户自己去管理和干预,它的发出的响应都是由浏览器和服务器自动管理的。

解决:

个人解决:在request.js文件中的axios的判断状态码的后面加上res.config.method !== "options"

axios.interceptors.response.use(
  (res) => {
    if (res.data.code !== "0000" && res.data.code !== undefined && res.config.method !== "options") { // 在限制的时候加上预检请求,
      res.data.code == "3000"
        ? router.push("login")
        : Notification({
            title: "tip",
            message: res.data.msg,
            type: "error",
          });    // 这里就是预检请求后发生的tips;
    }    if (res.headers.location) {
      window.location.href = res.headers.location;
    }
    return res;
  }
);

原理:

具体可以看以下掘金文章:
https://juejin.cn/post/6844904053328052232

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值