axios.post设置请求头,axios请求后端接口
最近工作中遇到一个问题。后端提供的get请求的接口需要在requestheader中设置。下面这篇文章主要介绍axios配置请求头content-type的相关信息，有需要的朋友可以参考一下。
目录
前言开始用总结。
前言
现在前端开发通过Ajax发送请求获取后端数据的情况非常普遍。由于我通常在代码中使用vue技术栈，所以今天，我们来谈谈—axios，一个常用的发送Ajax请求的插件。
目前可能在线发送Ajax请求的插件有很多种，每种用法可能略有不同。你只需要选择一个你喜欢的。毕竟很多人还在用jQuery，还有$。ajax用的很多。
开始
因为需要使用axios插件，所以现在都是靠下载。
npm安装axios -S
Axios是一个插件，但是我们不需要通过Vue.use(axios)来使用。下载完成后，我们只需要将其引入到项目中。至于为什么可以在百度上查到或者留言，好像开发者在打包axios的时候没有写安装这一步。
使用
比如我们在项目中使用myInfo.vue中的axios，当组件创建成功后，发送Ajax请求获取用户信息并展示给我们。先介绍一下，然后在创建的组件生命周期函数中提出请求。
如果需要先请求数据然后根据数据渲染页面展现给我们，一般可以在创建的组件生命周期钩子中发送Ajax请求，组件实例中的属性和方法都可以被调用。
现在到了重点的时刻了~~~
axios使用post发送数据时，json直接放在请求体中，默认提交到后端。也就是说，我们的内容类型变成了application/JSON；Charset=utf-8，这是axios的默认请求头内容类型。但实际上我们后端要求的 content-type : application/x-www-form-urlencoded 是通用的，和我们不一致。所以很多同学会在这里出错，请求的数据得不到。明明你的请求地址和参数都是正确的，但是你拿不到数据。
现在我们来谈谈post请求的常见数据格式(内容类型)。
Content-Type: application/json:请求体中的数据将被发送到后端content-Type:application/x-www-form-urlencoded:请求体中的数据将被发送到后端content-Type:multipart/form-data以通用形式(键值对)的形式：它将请求体中的数据处理成消息，以标记为单位，您可以上传键值对和文件。在我们熟悉了常见的请求数据格式之后，现在我们来解决刚刚遇到的问题：后端需要接受的数据类型是：application/x-www-form-urlencoded，我们应该如何配置前端：
常用方法总结：
1.【用URLSearchParams传递参数】代码简单易行。
let param=new URLSearchParams()
param.append(用户名，管理)
param.append(pwd ， admin )
axios({
方法： post ，
URL:“/API/lock server/search”，
数据：参数
})
你可以看到我在项目中使用了第一种方法。需要注意的是，URLSearchParams并不支持所有浏览器，但整体支持还可以，所以首先推荐这个简单直接的解决方案。
2.将axios请求头中的content-type配置为指定的类型。
3 . axios . defaults . headers . post[ Content-Type ]= application/x-www-form-urlencoded ；或{ headers:{ content-type : application/x-www-form-urlencoded } } `的
4.将参数转换为查询参数，并使用qs
介绍一下qs，这个库包含在axios里，不用再下载了。
从“qs”导入Qs
let data={
用户名:抄送，
psd: 123456
}
axios({
标题：{
“内容类型”:“应用程序/x-www-form-urlencoded”
},
方法： post ，
URL:“/API/lock server/search”，
数据：Qs.stringify(数据)
})
好了，我们已经解决了常见的application/x-www-form-urlencoded形式的引用，那么后两者如何转换，且听我说。
Content-Type: multipart/form-data
对于这类数据，我们一般是在前端页面上传个人图片，然后点击保存发送后端修改原始数据。根据解决方案：
设params=新表单数据()
params.append(file ，this.file)
params.append(id ，localStorage.getItem(userID ))
params.append(userName ，this.name)
params.append(sex ，this.sex)
params.append(mobile ，this.phone)
params.append(email ，this.email)
params.append(qq ，this.qq)
params.append(微信，这个。微信)
axios.post(URL，params，{ headers:{ Content-Type : multipart/form-data } })。然后(res={
if (res.data.code===0) {
这个。$router.go(-1)
}
}).catch(错误={
预警(“无法更新用户数据”错误)
})
这里可以看到我用这个方法更新了用户图像~ ~
Content-Type: application/json
这是axios的默认请求数据类型。我们只需要序列化参数的json字符串并传递，不需要多余的配置。
总结
好了，以上是配置内容类型的基本axios方法。欢迎提出更好的建议，纠正错误。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。