如何在React Js中通过Twilio发送短信及解决导入报错问题

问题1：如何在React JS中通过Twilio发送短信？ #

先给你划个重点：绝对不能直接在React前端代码里用Twilio的Node.js库！因为这会把你的Twilio账户SID和Auth Token直接暴露给所有用户，一旦泄露，别人就能随便用你的账户发短信、扣费，风险拉满。

正确的姿势是搭一个后端API，让前端通过调用这个后端接口来触发短信发送，具体步骤如下：

第一步：搭建后端服务（以Node.js/Express为例） #

1. 新建一个后端项目，安装必要依赖：

   npm init -y
   npm install express twilio dotenv cors
   

2. 新建.env文件存敏感信息（别硬写在代码里！）：

   TWILIO_ACCOUNT_SID=你的Twilio账户SID
   TWILIO_AUTH_TOKEN=你的Twilio认证Token
   TWILIO_PHONE_NUMBER=你的Twilio电话号码（格式如+1234567890）
   

3. 写后端接口代码（比如server.js）：

   require('dotenv').config();
   const express = require('express');
   const twilio = require('twilio');
   const cors = require('cors');
   const app = express();
   
   app.use(cors()); // 解决前端跨域问题
   app.use(express.json());
   
   const accountSid = process.env.TWILIO_ACCOUNT_SID;
   const authToken = process.env.TWILIO_AUTH_TOKEN;
   const twilioPhone = process.env.TWILIO_PHONE_NUMBER;
   
   const client = twilio(accountSid, authToken);
   
   // 短信发送接口
   app.post('/send-sms', async (req, res) => {
     const { num, sender, senderUID } = req.body;
     try {
       const message = await client.messages.create({
         body: `来自用户${sender}（UID: ${senderUID}）的消息`,
         from: twilioPhone,
         to: num
       });
       res.status(200).json({ success: true, messageId: message.sid });
     } catch (err) {
       res.status(500).json({ success: false, error: err.message });
     }
   });
   
   const PORT = process.env.PORT || 5000;
   app.listen(PORT, () => {
     console.log(`后端服务跑在端口${PORT}啦`);
   });
   

第二步：React前端调用后端接口 #

把你原来直接调用Twilio的代码，改成向后端发请求：

const _sendSMS = async (num, sender, senderUID) => {
  try {
    const response = await fetch('http://localhost:5000/send-sms', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ num, sender, senderUID }),
    });

    const result = await response.json();
    if (result.success) {
      alert('短信发送成功！');
    } else {
      alert(`发送失败：${result.error}`);
    }
  } catch (error) {
    console.error('请求出错:', error);
    alert('发送请求失败，先检查后端服务有没有启动哦');
  }
};

问题2：导入Twilio库后浏览器报错TypeError: deprecate.stream is undefined #

这个错的原因很直白：Twilio的官方Node.js库是给Node.js环境写的，它依赖了Node.js的核心模块（比如stream），而浏览器里根本没有这些模块，直接在React前端导入肯定会报错。

解决方法 #

别纠结怎么在前端兼容这个库了，直接用上面说的后端接口方案就好。这不仅能解决报错，还能保住你的Twilio账户安全，一举两得。

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