在开发项目过程中,发现在使用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. axios取消接口请求

    axios取消请求 这里就是分析一下接口请求需要被取消时的一些操作 因为我是用vue写的项目,所以标配用的是axios,怎么在axios中取消已经发送的请求呢? 1.在这之前我们还是先介绍一下原生js ...

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

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

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

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

  8. vue中使用axios发送请求

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

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

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

随机推荐

  1. 超简单的okHttpUtils封装(下)

      版权声明:转载请注明出处:http://blog.csdn.net/piaomiao8179 https://blog.csdn.net/piaomiao8179/article/details/ ...

  2. 关于在最新的 Visual Studio 2017 版本中使用 Web Deploy 遇到的 SSL 连接错误

    错误信息: 无法完成向远程代理 URL 发送请求.请求被中止: 未能创建 SSL/TLS 安全通道. 原因分析: 最新版本的 Visual Studio 中,已经抛弃了 https 协议中旧版 SSL ...

  3. 为啥百度、网易、小米都用Python?Python的用途是什么?

      Python是一门脚本语言.由于能将其他各种编程语言写的模块粘接在一起,也被称作胶水语言.强大的包容性.强悍的功能和应用的广泛性使其受到越来越多的关注,想起一句老话:你若盛开.蝴蝶自来. 假设你感 ...

  4. spring 整合junit进行测试

    如果想让junit和spring容器环境无缝对接的话,可以使用如下方式: import com.jd.ptest.service.ICronService; import org.junit.Test ...

  5. Node.js 反序列化漏洞远程执行代码(CVE-2017-5941)

    2.1 摘要 2.1.1 漏洞介绍 漏洞名称: Exploiting Node.js deserialization bug for Remote Code Execution 漏洞CVE id: C ...

  6. comake2

    http://blog.csdn.net/lsjseu/article/details/23395565 comake允许用户通过编写COMAKE文件,来帮助用户管理编译依赖以及编译环境的开发工具: ...

  7. mysql密码的坑

    一段时间没用本机的mysql,忘了root密码,从网上找的修改方法用起来大多都有问题.mysql版本8.0.12. 网上大多数思路:修改msql启动方式为带--skip-grant-tables参数: ...

  8. webstrom IDE 激活

    2017.2.27更新 选择“license server” 输入:http://idea.imsxm.com/ 2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框:选择“lice ...

  9. 配置gradle的daemon

    文档里提到,配置Daemon,能够加速gradle的构建,为了获取这个性能提上,我也得开启这个Daemon. 在Windows环境下:,可以执行这个命令 (if not exist "%US ...

  10. centos7下使用docker安装nginx

    需要环境docker,此处不做介绍. 1. docker拉取官方nginx镜像 docker pull nginx 2. 等待下载完成后,我们就可以在本地镜像列表里查到 REPOSITORY 为 ng ...