为什么axios请求接口会发起两次请求

之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事。

首先我们知道了额外的一次请求时option请求,那么这个是干嘛用的呢?

如果只是普通的 ajax 请求,也不会发起这个请求,只有当 ajax 请求绑定了 upload 的事件并且跨域的时候,就会自动发起这个请求。详细看http://www.tuicool.com/articles/3UBzIbb。

这样就明了了,就是我们有upload事件绑定(一般都是本地调试,所以会有跨域),我仔细看了下axios文档,发现config配置文件中有两个参数

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

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

分别处理上传和下载事件,也就是这里绑定了upload事件,所以每次请求都会有个option请求。

解决方案很简单,直接注释掉就好了,当然如果开发的工程上线使用跟请求的接口是同一个域名下自然不会两次请求。都看个人需求吧,关于axios的使用上一篇博文有介绍http://www.cnblogs.com/Upton/p/6180512.html

时间: 2024-08-04 22:50:03

为什么axios请求接口会发起两次请求的相关文章

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

在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后面经过查证资料发现: 如果只是普通的 ajax 请求,也不会发起这个请求,只有当 ajax 请求绑定了 upload 的事件并且跨域的时候,就会自动发起这个请求了.这样就很显然了,我们有 upload 事件绑定(一般都是本地调试,所以会有跨域),看了下 axios 文档,发现config配置文件中有

Axios 执行post发送两次请求的小坑

vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替.实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历. 问题:axios使用post请求时,发送了两次,而get则正常.第一次请求不是正确的post请求,第二次才是正确的 调出谷歌开发者工具 image.png "Request Method: OPTIONS"什么鬼,post请求时,这里的"Request Method"居然不是post,而是这个OPTIONS

axios发送两次请求原因及解决方法

axios发送两次请求原因及解决方法 最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的. 如图: 什么是CORS通信? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏

axios请求接口的踩坑之路

1.跨域问题除了前端安装插件还需要后端php设置,设置如下 Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, token Access-Control-Allow-Methods: OPTIONS,POST Access-Control-Allow-Origin: * 如果设置以后还不行,那就是phptinkp5带来的bug,查下文档即解决!!!! 2.使用axios(跨域)请求接口的时候,

封装axios的接口请求数据方法

lib文件夹中http.js文件的内容 包含了数据请求,路由的拦截,同时向外界暴露的是一个方法,方法内有三个参数,分别为请求的方式,地址,数据 1 import axios from 'axios'; 2 import qs from 'qs'; 3 4 const server=axios.create({ 5 timeout:5000, 6 withCredentials:true 7 }) 8 9 server.interceptors.request.use((config)=>{ 10

axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts 页面引入 import ECharts from 'vue-echarts' import ECharts from 'vue-echarts' import 'echarts/lib/chart/line' // 折线图 import "echarts/lib/component/title&q

ajax跨域请求接口介绍及解决方案

在前端开发过程中,将常出现前端代码和后台服务不在一个服务器的情况,这时候前端js代码调用后台接口,会出现跨域问题.: 1.这里的域是通过URL的头部来识别的.浏览器并不会去尝试判断相同的ip地址对应着两个域或者两个域是否在同一个ip上.URL的头部指window.location.protocol +window.location.host,也可以理解为"Domains, protocols and ports must match". 2.因为协议.IP.端口造成的跨域问题,只修改前

Retrofit Token过期自动刷新并重新请求接口

在有心课堂的群里,有网友提出如下场景: 当前开发的 App 遇到一个问题: 当请求某个接口时,由于 token 已经失效,所以接口会报错. 但是产品经理希望 app 能够马上刷新 token ,然后重复请求刚才那个接口,这个过程对用户来说是无感的. 请求 A 接口->服务器返回 token 过期->请求 token 刷新接口->请求 A 接口 我们应该是怎么解决这个问题呢? 经过百度搜索到了相关信息,这里总结下. 本文是采用RxJava + Retrofit来实现网络请求封装. 实现原理

使用CURL检测Clinet侧发起的HTTP请求各阶段时间

前言 上周,我方的一个客户反馈,访问我们的接口,平均耗时在2s以上.但是我方对请求进入,和请求返回,整个过程都有监控,我方的耗时基本在50ms以内,非常快. 后来了解到,客户从广东访问到我方上海,公网来访问我方.那么就建议去检测,DNS耗时,TCP建立的耗时等.理论上,长距离的公网,网络延迟就非常高.遂建议使用CURL去检查.结果果然如猜想,在TCP建立的耗时就很久. 进入正题,这篇文章主要介绍使用CURL检测Client端发起的HTTP请求,各个阶段的时间. 第一.HTTP请求的过程介绍 一个