排查Axios POST请求后台接收不到数据的问题
在使用Axios发送POST请求时，前端代码看似正常运行，但后端却无法接收数据，而Postman却能成功发送，这通常是由于请求配置问题导致的。本文将通过一个案例分析并解决此问题。
问题描述： 开发者使用Axios向/login接口发送POST请求，传递用户名en和密码password。前端代码运行正常，但后端始终无法接收数据。Postman测试却成功，说明问题不在后端接口本身。
代码片段（原始）：
request({
url:"/login",
method:"post",
data: {
en: this.en,
password: this.password
}
}).then(res => {
console.log(res);
});
问题根源： 关键在于HTTP请求的Content-Type。Axios默认使用application/json，期望接收JSON格式数据。而Postman测试很可能使用了application/x-www-form-urlencoded，这是一种键值对编码方式，类似表单提交。因此，Axios发送的JSON数据与后端期望的表单数据格式不匹配。
解决方案： 需要将Axios请求的数据格式调整为application/x-www-form-urlencoded。可以使用qs库实现此转换。
代码片段（修改后）：
import axios from 'axios';
import qs from 'qs';
let data = {
"en": "1234",
"password": "yyyy"
};
axios.post(`/login`, qs.stringify(data))
.then(res => {
console.log('res=>', res);
})
.catch(error => {
console.error('Error:', error);
});
通过qs.stringify(data)，将数据对象转换为application/x-www-form-urlencoded格式的字符串，确保与后端接口兼容。 修改后，Axios就能正确发送数据，后端也能成功接收并处理请求。 添加了.catch块来处理潜在的错误。 这使得代码更健壮，能够更好地处理网络请求失败的情况。
