React+Axios调用Spring Boot Twilio POST接口提示缺少To参数问题

你的问题核心是前端Axios的传参格式错误，导致后端无法正确解析出phoneNumber，进而传给Twilio时缺少To参数（因为Twilio的Verification.creator第二个参数就是To字段，对应你传入的twilioSendDto.getPhoneNumber()）。同时你对Axios的POST请求语法理解有误，下面一步步拆解解决：

一、错误原因拆解 #

1. 第一种Axios写法的问题 #

Axios的POST请求语法是：axios.post(url, data, config)，但你把data和config合并成了一个对象传入，导致实际发送的请求里没有正确的请求体数据。而且你直接传入phoneNumber字符串，没有包装成后端期望的{phoneNumber: xxx}结构，后端的@RequestBody TwilioSendDto无法解析出有效数据，最终传给Twilio的To参数为空。

2. 第二种qs写法的问题 #

同样犯了Axios语法错误，并且qs.stringify(phoneNumber)只会把字符串转成纯文本，而不是键值对格式（应该是qs.stringify({phoneNumber: phoneNumber})）。更关键的是，你的后端用@RequestBody接收JSON格式数据，而你设置了content-type: application/x-www-form-urlencoded，两者不匹配，后端无法解析。

二、正确的前端实现方式 #

方式一：JSON格式传参（推荐，和Swagger调用格式一致） #

修改你的Axios请求，按照正确的语法传递JSON格式的请求体：

sendOtpCode(phoneNumber, message) {
    console.log("phone number", phoneNumber);
    // 注意：确保phoneNumber是Twilio要求的E.164格式，比如"+1234567890"
    return axios.post("http://localhost:8080/twilio", 
        { phoneNumber: phoneNumber }, // 这里是请求体数据，和后端TwilioSendDto字段对应
        {
            headers: {
                'Content-Type': 'application/json',
            }
        }
    );
}

调用代码保持不变：

AuthService.sendOtpCode(this.state.contactno).then(response =>{
    this.setState({ message: response.data, successful: true });
})

方式二：Form-urlencoded格式传参（需要后端适配） #

如果你非要用form-urlencoded格式，需要同时修改前端和后端：

前端修改：

import qs from 'qs';

sendOtpCode(phoneNumber, message) {
    console.log("phone number", phoneNumber);
    return axios.post("http://localhost:8080/twilio", 
        qs.stringify({ phoneNumber: phoneNumber }), // 包装成键值对再转码
        {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
            }
        }
    );
}

后端修改：

在Controller的sendOtpCode方法上，把@RequestBody改成@ModelAttribute（适配表单格式的Dto解析）：

@PostMapping
ResponseEntity<?> sendOtpCode(@ModelAttribute TwilioSendDto twilioSendDto){
    return twilioService.sendOtpCode(twilioSendDto);
}

三、额外注意事项 #

• 确保你传入的phoneNumber是Twilio要求的E.164格式（比如+12025550131），Swagger调用正常说明你在Swagger里填的是正确格式，前端也要保证传入的号码符合这个格式，否则Twilio也会报错。
• 可以在浏览器的开发者工具（Network面板）里查看请求的Request Payload，确认发送的数据是否是{"phoneNumber": "你的号码"}，这样能快速定位传参是否正确。

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