如何通过Express使用Twilio API发送自定义内容的SMS短信

方法选择说明 #

优先使用POST方法实现需求：发送短信属于触发操作、创建新资源的行为，POST更符合HTTP规范，同时不会将短信内容暴露在URL中，安全性和适用性都优于GET方法。

前端代码修改 #

原有前端代码存在两个问题：

1. 输入框取值时机错误，页面加载时就获取了输入值，无法拿到用户点击按钮时的最新输入内容
2. fetch请求未指定请求方法，也没有传递用户输入的参数

修改后的前端代码如下：

document.querySelector("button").addEventListener("click", whatTheHell);
function whatTheHell() {
  // 点击按钮时才获取用户最新输入的内容
  const inputContent = document.querySelector("input").value.trim();
  // 简单空值校验避免发送空短信
  if (!inputContent) return alert("请输入短信内容");
  fetch("/sendSms", {
    method: "POST", // 指定POST请求方法
    headers: {
      "Content-Type": "application/json" // 声明请求体为JSON格式
    },
    body: JSON.stringify({ msg: inputContent }) // 把输入内容放到请求体中传递
  })
    .then((res) => res.json())
    .then((res) => console.log("发送成功", res))
    .catch((err) => console.log("发送失败", err));
};

后端代码修改 #

原有后端代码存在两个问题：

1. 使用GET方法接收请求，无法解析POST请求的请求体参数
2. 短信内容硬编码，没有读取前端传递的参数

修改后的后端代码如下：

const express = require("express");
if (process.env.NODE_ENV !== "production") {
  require("dotenv").config();
}
const accountSid = process.env.accountSid;
const authToken = process.env.authToken ; 
const app = express();
const client = require("twilio")(accountSid, authToken);
app.use(express.json());
app.use(express.static("public"));

// 改为POST方法匹配前端请求
app.post("/sendSms", async (req, res) => {
  try {
    // 从请求体中读取前端传递的短信内容
    const smsContent = req.body.msg;
    const message = await client.messages.create({
      body: smsContent, // 替换原有硬编码内容
      messagingServiceSid: "MGXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      to: "NUMBER", // 替换为实际接收短信的号码
    });
    res.json({ success: true, messageSid: message.sid });
  } catch (error) {
    // 新增错误处理方便排查问题
    console.error("短信发送失败", error);
    res.status(500).json({ success: false, error: error.message });
  }
});

app.listen(3000, () => {
  console.log("Server Started");
});

注意事项 #

• 确保前端HTML页面中存在对应的<input>和<button>元素
• 如果使用Twilio试用账号，接收短信的号码需要先在Twilio后台完成验证才能正常接收
• 确保.env文件中配置的accountSid、authToken和Twilio后台一致，messagingServiceSid也要替换为你自己的服务ID

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