使用Axios向Node.js服务器传参失败，出现404错误求助

问题根源 #

你的前端请求通过URL查询参数（query params）传递NUM（请求URL为/api/mail?NUM=971561490375），但后端路由定义的是路由参数（route params）/api/mail/:NUM，两者参数传递方式不匹配，导致服务器找不到对应路由，返回404错误。

修复方案（二选一即可） #

方案1：修改前端请求，使用路由参数传递NUM #

将Axios请求的URL改为包含路由参数的格式，移除params配置：

const sendSMSClinic = async () => {
  console.log("CLINIC SMS SENDING FUNCTION ACCESSED");
  try {
    // 直接把NUM拼接到URL路径中
    let res = await axios.get("http://localhost:3001/api/mail/971561490375");
    console.log("短信请求发送成功");
  } catch(AxiosError) {
    console.error("请求失败:", AxiosError)
  }
}

如果NUM是动态值，用模板字符串拼接：

const targetNum = "971561490375";
let res = await axios.get(`http://localhost:3001/api/mail/${targetNum}`);

方案2：修改后端路由，接收查询参数 #

将后端路由改为不包含路由参数的形式，通过req.query.NUM获取查询参数：

// 把路由从 /api/mail/:NUM 改为 /api/mail
app.get('/api/mail', async (req, res) => {
    const targetNum = req.query.NUM;
    console.log("目标号码:", targetNum);

    try {
        // 用await处理Twilio的异步操作，捕获错误
        const message = await client.messages.create({         
            to: `+${targetNum}`, // 使用获取到的参数
            from: '+16188160866',
            body: 'REASON FOR CALL: CLINIC EMERGENCY'
        });
        console.log("短信SID:", message.sid);
        res.status(200).json({success: true, sid: message.sid}); // 给前端返回成功响应
    } catch (error) {
        console.error("发送短信失败:", error);
        res.status(500).json({success: false, error: error.message}); // 返回错误响应
    }
})

额外优化建议 #

• 后端必须返回响应：原后端代码没有给前端返回任何响应，会导致前端请求一直处于pending状态最终超时，上述方案已补充响应逻辑。
• 异步操作错误捕获：Twilio的messages.create()是异步操作，用try/catch捕获错误可避免服务器崩溃。
• 号码格式校验：确保传递的NUM包含正确的国家码前缀，或在后端统一添加+前缀。

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