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 ...
随机推荐
- Redis数据结构详解,五种数据结构分分钟掌握
redis数据类型分为:字符串类型.散列类型.列表类型.集合类型.有序集合类型.redis这么火,它运行有多块?一台普通的笔记本电脑,可以在1秒钟内完成十万次的读写操作.原子操作:最小的操作单位,不能 ...
- 强化学习-时序差分算法(TD)和SARAS法
1. 前言 我们前面介绍了第一个Model Free的模型蒙特卡洛算法.蒙特卡罗法在估计价值时使用了完整序列的长期回报.而且蒙特卡洛法有较大的方差,模型不是很稳定.本节我们介绍时序差分法,时序差分法不 ...
- Hadoop:hdfs文件permission denied问题解析
Cron jobs can be scheduled, but fail to write parquet file and seems due to user permission of “yarn ...
- 刷机补丁包updater-script脚本
1.单刷补丁包 新建META-INF文件夹,新建txt文件命名为:updater-script新建system文件夹,在里面新建app文件夹,把你要单刷的apk放进app文件夹在updater-scr ...
- "title_activity_dist" is not translated in "zh-rCN" (Chinese: China)
根据报错提示,是说我没有对string文件做国际化翻译操作,但是我报错的项目并没有做国际化,所以并没有values-zh-rCN和values-zh-rTW两个文件夹,最后我发现原来是当前项目引用的一 ...
- Flume架构以及应用介绍[转]
在具体介绍本文内容之前,先给大家看一下Hadoop业务的整体开发流程: 从Hadoop的业务开发流程图中可以看出,在大数据的业务处理过程中,对于数据的采集是十分重要的一步,也是不可避免的一步,从而引出 ...
- macbook air 2012 mid 安装 windows10 双系统遇到错误 no bootable device insert boot disk and press any key
macbook型号:air 2012 mid 当前操作系统:mojave 安装工具:boot camp assistant 要安装的双系统:windows 10家庭版 安装教程:百度搜一堆 安装过程中 ...
- 如何在 Fiddler Script 中 自定义 修改 Request 、 Response
Fiddler是一个http协议调试代理工具,方便进行http请求的拦截处理.改写请求.返回值等. 在Rules菜单下: 此次更改请求 头 ,so go to OnBeforeRequest 或者 ...
- python处理文件的换行符
我们知道在Windows平台下的换行符是\r\n,而在linux下的换行符是\n.现在写一个简单程序来测试python是如何处理这些换行符的. 准备文件data.txt,该文件在Windows平台下编 ...
- PHP memcached memcache 扩展安装
好久没配置环境今天安装PHP 开发环境, 项目比较老,一开始以为项目用的是memcache 装完后发现 项目用的是memcached 所以正好两个都装了. 碰到些坑希望能帮助到百度到这篇文章的伙伴 . ...