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 直接返回就可以了，前端可不做处理；

原文地址：https://www.cnblogs.com/rxqlx/p/10414917.html

时间： 2024-10-02 20:10:07

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

vue中使用axios（异步请求）和mock.js 模拟虚假数据

一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二.使用mock 1.安装 npm install --save mockjs 2.创建mock目录 3.创建mock.js 4.引用 import mockData from './mock/mock' 5.使用 this.Axios.post('/getNewsList/').then(funct

vue中采用axios发送post请求

这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 1 let qs = require

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

06 vue中使用axios跨域

本节将展示如果通过axios+proxyTable完成跨域请求并显示数据. 1.前提约束完成nodejs,vue-cli,webpack,webpack-dev-server的安装 https://www.jianshu.com/p/eb4d9e132f62 2.操作步骤完成vue项目中加入easytable[这时是固定数据] https://www.jianshu.com/p/bf5abb37eb3f 下载axios依赖包 cd vue-easytable cnpm install axi

封装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

angular 中使用 axios 发起 http 请求

angular 中使用 axios /** * 在angular 中引入第三方 http 模块的使用, 以 axios 为例 * 有两种使用方法:(本文使用Promise简单封装) * 一. 直接在要使用请求的组件中 import axios from 'axios', 调用: axios.get/ axios.post ... * 二. 封装成服务: * 1. 引入 axios: import axios from 'axios' * 2. 用 promis

vue项目配置 axios携带token请求头

在main.js中 import axios from 'axios' axios.defaults.baseURL = '' axios.interceptors.request.use(config => { //配置axios请求头,axios每次发起请求携带token,在Network中的headers看的到 // console.log(config) config.headers.Authorization = window.sessionStorage.getItem('token

vue中使用axios最详细教程

前提条件:vue-cli 项目安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS from 'qs' Vue.prototype.qs = QS; 封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改接口地址就可以用) import axios from 'ax

记vue中封装axios

文件结构: mocks:中是本地json数据 adapter.js: 调用本地数据方法 resources.js 统一接口管理 export default { fetchDict: { url: '/v1/system/fetchDcType', method: 'post' } } 重点是以下俩个文件 index.js 拦截器以及请求头设置,并添加实例属性 import Vue from 'vue'; import axios from 'axios'; import { Toast } f