vue 中使用 axios 请求接口,请求会发送两次问题

时间:2022-12-09 10:53:01

在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果;只有第二次请求时才会有相应的请求参数以及请求结果;

那为甚么会有这么一次额外的请求呢,后面经过查证资料发现:

如果只是普通的 ajax 请求,也不会发起这个请求,只有当 ajax 请求绑定了 upload 的事件并且跨域的时候,就会自动发起这个请求了。这样就很显然了,我们有 upload 事件绑定(一般都是本地调试,所以会有跨域),看了下 axios 文档,发现config配置文件中有两个参数:分别用于处理上传和下载事件,也就是这里绑定了 upload 事件,所以每次请求都会有个 option 请求。

// onUploadProgress: function(progressEvent) {
    //     // Do whatever you want with the native progress event
    // },

 // onDownloadProgress: function(progressEvent) {
 //     // Do whatever you want with the native progress event
 // },

解决方案如下:

①.直接注释掉配置文档中这两个事件的请求就好了;

②.跨域请求需要先发一次 option 预请求,options是检验是否允许跨域的,如果不希望options 请求,直接让后端遇到option 直接返回就可以了,前端可不做处理;

vue 中使用 axios 请求接口,请求会发送两次问题的更多相关文章

  1. vue中使用axios进行ajax请求数据(跨域配置)

    npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...

  2. vue中使用axios(异步请求)和mock.js 模拟虚假数据

    一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...

  3. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  4. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  5. Vue-cli3.x中使用Axios发送跨域请求的配置方法

    Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...

  6. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  7. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

  8. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

  9. Vue简单封装axios—解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...

随机推荐

  1. p2p tcp nat 原理图+源码(原创)

    现今网上p2p的 udp nat穿透 文章 多如牛毛, p2p tcp nat的文章寥寥无几 ,up主研究了几天 终于有所收获,特来向大家分享,请大家多多支持! 1.首先你要有台外网服务器 或者 电信 ...

  2. C#实现任意大数的计算和简单逻辑命题的证明——前言

    介绍 这是本人毕业设计的项目,一直想将其整理成文,可一不小心4年就过去了(这个时间又可以读个大学了).现在给自己定一个目标,一个月时间里将项目的所有关键点都整理出来.不然真怕一眨眼又一个4年过去了,而 ...

  3. python操作memcache

            48.python 操作memcached                  Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存 ...

  4. solr学习-基础环境搭建(一)

    目前网上关于solr6.+的安装教程很少,有些6.0之前的教程在应用到6.+的版本中出现很多的问题,所以特别整理出来这一片文章,希望能给各位码农一些帮助! 很少写些文章,如有不对的地方,还希望多多指导 ...

  5. CentOS7、REHL7的firewalld防火墙使用简单说明

    title: CentOS7.REHL7的firewalld防火墙使用简单说明 categories: Linux tags: - Linux timezone: Asia/Shanghai date ...

  6. 初学Python——RabbitMQ的安装

    记录踩坑之路,本篇文章主要摘抄自CSDN博客https://blog.csdn.net/weixin_39735923/article/details/79288578 Windows10环境下安装R ...

  7. pack 方便的npm 构建工具

      一般我们都是使用nodejs 自身的npm 或者yarn进行 npm 包的开发(包括构建),但是随着强类型的开发模式 在实际web 的开发中越来越重要,大家一般都会选择使用typescript 等 ...

  8. 获取docker容器的ip地址

    1.进入容器后执行cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSettings. ...

  9. 提高Java代码质量的Eclipse插件之Checkstyle的使用具体解释

    CheckStyle是SourceForge下的一个项目,提供了一个帮助JAVA开发者遵守某些编码规范的工具.它可以自己主动化代码规范检查过程.从而使得开发者从这项重要可是枯燥的任务中解脱出来. Ch ...

  10. CSS - 移动端 常见小bug整理与解决方法总结【更新中】

    常见问题总结与整理系列~ 1. border一像素在手机上看着有点粗的问题: 原理是因为:1px在手机上是使用2dp进行渲染的.换成 border: 0.5像素?是不行的! 解决方法: 把border ...