专栏首页娱乐心理测试axios发送两次请求及遇到的坑

axios发送两次请求及遇到的坑

在以前的Vue项目商城中,使用axios组件做数据请求,在页面交互中发现会发送两次网络请求,因为没有造成什么影响,一直也没有追究原因。在一个新的项目中,需要加入请求头Token判断是否需要登录,因为后台没有做任何限制,在第一次请求时,后台就返回需要登录,那同事也不知道什么原因,一直说是请求没有传Token,百度才发现原因。

一.两次请求方式原因:

浏览器将CORS请求分成两类:简单请求 和 非简单请求。 1.请求方式: HEAD,GET,POST 2.请求头信息:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form--data、text/plain。

只有同时满足以上两个条件时,才是简单请求,否则为非简单请求。 非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

即:浏览器会首先使用 OPTIONS 方法发起一个预请求,判断接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始真正的请求。

因为我们项目中使用的是GET,POST请求,Content-Type使用默认:application/json;charset=UTF-8。所以会发送一次预请求和一次正式请求两次请求。

二.解决方法

1.前端把非简单请求改为简单请求。 我们把Content-Type使用默认:application/json;charset=UTF-8。修改为application/x-www-form-urlencoded,即可转化为简单请求,但是测了之后发现后台并不识别这种请求格式,需要数据格式转化。 (1). npm install qs (2).在main.js中引入qs模块

import qs from 'qs'
Vue.prototype.$qs = qs

(3).转化格式

this.$axios
     .post("http://xxx/", 
        this.$qs.stringify(postData)
      ).then(data => {
        if (data.data.status != 200) {
          //xxx
        } else {
          //xxx
        }
      });

注意:config.headers.Authorization携带了token的情况仍然是非简单请求。

2.服务期端直接通过“预检”请求,服务器新建拦截器,拦截所有请求,筛选所有Requset Method:OPTIONS的请求,不做任何处理直接返回即可。

推荐方法2,服务端拦截的方法!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网络请求返回HTTP状态码(404,400,500)

    honey缘木鱼
  • vue 界面在苹果手机上滑动点击事件等卡顿解决方案

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,...

    honey缘木鱼
  • 你知道这个小技巧吗?

    honey缘木鱼
  • 从http规范角度来看xmlhttprequest发送请求

    最近有点怠工,停更好久,今天分享一篇小白文,原生ajax,看标题肯定不同于其他文章的ajax,而是从http规范角度来看xmlhttprequest发送请求。

    挥刀北上
  • 面试官:说说你对 options 请求的理解

    简单来说,就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持哪种请求方法。

    Tusi
  • 小结HTTP状态码

    作为一个web开发工程师,我们平时都会和诸如200, 304, 404, 501等状态码打交道,那么它们是什么意思呢?今天,我们来聊聊~

    嘉明
  • 干货 | 计算密集型服务的负载均衡策略

    罗茂林,携程国际机票后台研发总监,主要负责国际机票引擎的研发工作。致力于系统性能优化和研发效率提升。

    携程技术
  • Provisional headers are shown in Chrome network tab

    细心的同学应该留意到,新版开发者工具的 Network 面板中,某些请求头后面会跟着下面这行文字:

    Jerry Wang
  • 测试工具Fiddler(三)—— 常见功能介绍

    3、autoresponder: 文件代理:可以使用fiddler来自定义请求返回的文件。

    小菠萝测试笔记
  • 每天一道面试题 | day07

    GET请求获取Request-URI所标识的资源,例如:在浏览器的地址栏中输入网址的方式访问网页时,浏览器采用GET方法向服务器获取资源。

    剑走天涯

扫码关注云+社区

领取腾讯云代金券