最近在做项目，用axios向后台发送post请求，具体的写法参照官方文档的写法：
// 发送 POST 请求
axios({
method: 'post',
url: ‘http://127.0.0.1:3000/login'
data: {
username: admin,
password: admin
}
}).then((value)=>{
console.log(value)
})
.catch(reason=>{console.log(reason)});
我发现，其实后台是接收到了post请求，但是一直无法解析我传过去的参数，而且我尝试用postman测试了一下接口，用postman时可以正确传参的，同时，我在后台打印了一下传过去的参数，发现username和password都是undefined，说明是我传参的方式出了问题。
找了很久都没有找到原因，然后我查阅了下网上资料，把传参改成了以下格式：
let param = new URLSearchParams()
param.append('username', 'admin')
param.append('password','admin')
axios({
method: 'post',
url: "http://127.0.0.1:3000/login",
data: param
})
.then((result) => { console.log(result) })
.catch((reason) => { console.log(reason) })
};
这个时候，发现后台已经可以接收到参数了。
查阅了下文档，发现：
axios的get请求都是把参数放在params属性下，在post请求下有两种方法，一种是放在params属性中，适合传参较少且数据较简单的情况，另外一种是放在data属性中，如果传参中含有引号、等号、拼接的json串或传参的数据量较大时候使用；源码是这样的：
//如果是带&&的参数的格式转成String
if(utils.isURLSearchParams(data){
setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded');
return data.tostring();
}
//如果是object对象转成json格式
if(utils.isObject(data){
setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
return JSON.stringfy(data);
}
我想起之前后台的服务器的配置，node后台一般会配置中间件解析数据，包含两种方式：
app.use(express.urlencoded({extended: true})) // 请求体参数是: name=tom&pwd=123
app.use(express.json()) // 请求体参数是json结构: {name: tom, pwd: 123}
看到这里就豁然开朗了，post请求的两种数据格式要和后台的解析方式相对应，如果后台固定了，就可以通过前端js代码对数据格式进行转换
这个bug当时找了蛮久，关键是要知道出错的根本原因，才知道后面遇到类似的问题如果解决。
发表评论