Axios同一请求发送两次解决方案(亲测可行)

Fantasy_IT

于 2018-11-01 10:26:52 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前后端分离文章标签： Axios发两个请求 OPTIONS请求

本文链接：https://blog.youkuaiyun.com/FANTASY522272820/article/details/83616028

前后端分离专栏收录该内容

2 篇文章

订阅专栏

本文探讨了Axios发送同一请求两次的问题根源在于其默认的Content-Type设置导致非简单请求。通过修改Axios配置，使其变为简单请求，有效解决了该问题。文章详细介绍了如何更改Axios的默认请求方式，并解释了哪些请求被视为简单请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Axios同一请求发送两次

问题出现原因：Axios默认的Content-Type为application/json,属于非简单请求，所以客户端在发送请求时，会先发送预请求（OPTIONS），询问能否向后端发送请求。若能发送，则再发送真正的请求到后端。

解决方案：手动更改Axios默认的请求方式，让其变为简单请求，在相关的axios.js文件中，添加如下配置即可。（后端请使用:@RequestParam接收参数）

import Axios from 'axios'
import Qs from 'qs'

Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
Axios.defaults.transformRequest = [obj => Qs.stringify(obj)]

哪些请求属于简单请求？（只有同时满足以下两个条件时,才是简单请求,除此之外皆为非简单请求）

* 请求方式:HEAD,GET,POST

* 请求头信息: Accept Accept-Language Content-Language Last-Event-ID Content-Type 对应的值是以下三个中的任意一个 application/x-www-form-urlencoded multipart/form-data text/plain