VueJS中Axios POST请求无法传递参数值的问题排查

嘿，这个问题我之前也碰到过！核心原因是GET和POST请求在Axios里的参数传递逻辑完全不一样，你现在的写法没把参数放到API期望的位置，所以才拿不到。咱们一步步来解决：

先搞懂Axios的POST参数规则 #

Axios的post方法签名是：

axios.post(url[, data[, config]])

• 第二个参数data：是POST请求的**请求体（Body）**数据，会放在请求的Body里发送
• 第三个参数config里的params：才是会拼到URL末尾的Query参数（和GET请求的params逻辑一致）

你之前的代码把params放到了第二个参数的位置，相当于把它当成请求体发送了，但你的API可能还是按照原来GET的逻辑，从Query参数里取数据，自然拿不到。

两种解决方案，对应API的参数接收方式 #

情况1：API期望从Query参数里获取值（和原来GET的逻辑一样） #

如果你的API还是需要从?STATE_DD_INPUT=xxx这种URL Query里拿参数，那需要把params放到第三个参数的配置对象里，第二个参数传空对象（因为POST请求可能不需要Body）：

axios.post(window.location.origin + '/API/StateContacts', {}, { 
  params: { STATE_DD_INPUT: stateDD } 
}) 
.then(response => { this.stateContactsArray = response.data; })
.catch(error => { console.log(error.response.data.error); });

情况2：API应该从POST请求体里获取值 #

如果为了安全，你希望把参数放在请求体里（这才是POST请求的常规用法），那需要直接把参数对象作为第二个参数传递，不要包在params里：

axios.post(window.location.origin + '/API/StateContacts', { 
  STATE_DD_INPUT: stateDD 
}) 
.then(response => { this.stateContactsArray = response.data; })
.catch(error => { console.log(error.response.data.error); });

这种情况下，你需要确认后端API是从请求体（比如JSON格式）里读取STATE_DD_INPUT参数，而不是从Query里。

快速排查小技巧 #

打开浏览器的开发者工具（Network标签），发送POST请求后查看请求详情：

• 看Request URL里有没有?STATE_DD_INPUT=xxx，确认Query参数是否存在
• 看Payload或Request Body里有没有参数，确认请求体是否正确

对比之前成功的GET请求的参数位置，就能快速判断该用哪种方案啦～

内容的提问来源于stack exchange，提问作者Qiuzman