vue 中使用 axios 请求接口,请求会发送两次问题
在开发项目过程中,发现在使用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 请求接口,请求会发送两次问题的更多相关文章
- vue中使用axios进行ajax请求数据(跨域配置)
npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...
- vue中使用axios(异步请求)和mock.js 模拟虚假数据
一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- axios取消接口请求
axios取消请求 这里就是分析一下接口请求需要被取消时的一些操作 因为我是用vue写的项目,所以标配用的是axios,怎么在axios中取消已经发送的请求呢? 1.在这之前我们还是先介绍一下原生js ...
- Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
随机推荐
- Spark 精品文章转载(目录)
学习 Spark 中,别人整理不错的文章,转载至本博客,方便自己学习,并按照不同的模块归档整理.每个文章作者能力不同,写文章所处的时间点不同,可能会略有差异,在阅读的同时,注意当时的文章的内容是否已经 ...
- 【Java编码规范】《阿里巴巴Java开发手册(正式版)》【转载】
2017年开春之际,诚意献上重磅大礼:阿里巴巴Java开发手册,首次公开阿里官方Java代码规范标准.这套Java统一规范标准将有助于提高行业编码规范化水平,帮助行业人员提高开发质量和效率.大大降低代 ...
- SparkStreaming+Kafka 处理实时WIFI数据
业务背景 技术选型 Kafka Producer SparkStreaming 接收Kafka数据流 基于Receiver接收数据 直连方式读取kafka数据 Direct连接示例 使用Zookeep ...
- js 暂时存储 sessionStorge
H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE html ...
- Cesium简单使用
CesiumJS是一个基于javascript的浏览器器3d地图引擎 下载 https://cesiumjs.org/downloads/ 下载的Cesium-1.56.1,解压后的结构为 1.设置W ...
- git rebase 的使用
rebase 在 Git 中整合来自不同分支的修改主要有两种方法:merge 以及 rebase. 在本节中我们将学习什么是“rebase”,怎样使用“rebase”,并将展示该操作的惊艳之处,以及指 ...
- 内建模块collections的使用
# -*-coding:utf-8 -*- from collections import namedtuple Point=namedtuple('Point',['x','y']) p=Point ...
- 微信小程序中同步 异步的使用
https://www.jianshu.com/p/e92c7495da76 微信小程序中使用Promise进行异步流程处理 https://www.cnblogs.com/cckui/p/102 ...
- MTK 音量加减键修改为默认控制媒体音量
frameworks/base/media/java/android/media/AudioService.java: private int getActiveStreamType(int sugg ...
- k8s(5)-拓展服务
在之前我们创建了一个部署,然后通过服务公开它.部署只创建了一个Pod来运行我们的应用程序.当流量增加时,我们需要扩展应用程序以满足用户需求. 通过更改部署中的副本数来完成扩展. 1. 拓展部署 这里将 ...