axios 设置请求头

现在到了重点的时刻了~~~axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8 ,这是axios默认的请求头content-type类型。但是实际我们后端要求的 ‘Content-Type’: ‘application/x-www-form-urle

Kunz-

9794人浏览 · 2020-06-02 14:54:51

Kunz- · 2020-06-02 14:54:51 发布

不多比比，先上代码

配置axios请求头中的content-type为指定类型

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: '/api/lockServer/search',
    data: Qs.stringify(data)

})
//'Content-Type': 'application/x-www-form-urlencoded'//   
//'Content-Type': 'application/json;charset=utf-8'

现在到了重点的时刻了~~~

axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8 ,这是axios默认的请求头content-type类型。但是实际我们后端要求的 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 为多见，这就与我们不符合。所以很多同学会在这里犯错误，导致请求数据获取不到。明明自己的请求地址和参数都对了却得不到数据。

我们现在来说说post请求常见的数据格式（content-type）

Content-Type: application/json ：请求体中的数据会以json字符串的形式发送到后端
Content-Type: application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端
Content-Type: multipart/form-data：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。
我们熟悉了常见的请求数据格式之后，现在我们来解决刚才遇到的问题：后端需要接受的数据类型为：application/x-www-form-urlencoded，我们前端该如何配置：

常见方法汇总：

【用 URLSearchParams 传递参数】代码简单，省事

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})