Angular项目用Twilio发SMS遇TypeError: Cannot read property 'isTTY' of undefined问题

这个坑我之前踩过！你遇到的错误本质是Twilio的Node.js SDK不能直接在Angular前端环境运行——它是专门为Node.js服务端设计的，依赖Node.js的process等核心API，而浏览器环境里根本没有这些对象，自然会抛出找不到isTTY的错误。更重要的是，直接在前端写Account Sid和Auth Token会把敏感信息暴露给所有人，这是严重的安全问题！

正确的解决方案：后端中转短信请求 #

你需要搭建一个简单的后端服务（比如用Node.js + Express），把Twilio的调用逻辑放在后端，然后Angular前端通过HTTP请求调用这个后端接口。

步骤1：编写后端服务（Node.js/Express）

先安装依赖：

npm install express twilio cors

然后创建server.js文件：

const express = require('express');
const twilio = require('twilio');
const cors = require('cors');

const app = express();
// 允许Angular跨域请求
app.use(cors());
// 解析JSON请求体
app.use(express.json());

// 用环境变量存储敏感信息，不要硬编码！
const accountSid = process.env.TWILIO_ACCOUNT_SID || '你的Account Sid';
const authToken = process.env.TWILIO_AUTH_TOKEN || '你的Auth Token';
const twilioPhoneNumber = '+你的Twilio号码';

const client = twilio(accountSid, authToken);

// 处理短信发送请求的接口
app.post('/send-verification-sms', async (req, res) => {
  try {
    const { toPhoneNumber } = req.body;
    const verificationCode = Math.floor(1000 + Math.random() * 9000);
    
    const message = await client.messages.create({
      to: toPhoneNumber,
      from: twilioPhoneNumber,
      body: `Your verification code is ${verificationCode}`
    });

    res.status(200).json({
      success: true,
      messageSid: message.sid,
      verificationCode // 可选：如果需要前端保存验证码做校验，返回给前端（生产环境建议后端存验证码）
    });
  } catch (error) {
    console.error('Twilio发送失败:', error);
    res.status(500).json({
      success: false,
      error: error.message
    });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`后端服务运行在端口 ${PORT}`);
});

步骤2：Angular前端调用后端接口

首先确保你的Angular项目已经导入了HttpClientModule（在app.module.ts中）：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他模块
    HttpClientModule
  ]
})
export class AppModule { }

然后在组件中编写调用逻辑：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-verification',
  template: `<button (click)="sendCode()">发送验证码</button>`
})
export class VerificationComponent {
  constructor(private http: HttpClient) {}

  sendCode() {
    const targetPhone = '+94716220786'; // 可以换成用户输入的手机号
    this.http.post('http://localhost:3000/send-verification-sms', {
      toPhoneNumber: targetPhone
    }).subscribe({
      next: (response: any) => {
        console.log('短信发送成功，SID:', response.messageSid);
        alert('验证码已发送！');
      },
      error: (err) => {
        console.error('发送失败:', err);
        alert('短信发送失败，请稍后重试');
      }
    });
  }
}

注意事项

• 永远不要在前端代码中暴露Twilio的Account Sid和Auth Token，这俩是服务端的敏感凭证！
• 生产环境部署时，后端要配置HTTPS，并且用环境变量管理敏感信息（比如用dotenv包）
• 如果你不需要返回验证码给前端，可以把验证码存在后端的数据库或缓存中，用于后续校验

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