Node.js返回Twilio旧余额至Angular组件的问题排查

API 探路者

2026-8-6

问题排查与解决

核心原因：客户端缓存导致重复返回初始余额

你的问题大概率是浏览器缓存GET请求响应造成的。后端接口返回账户余额时未设置禁止缓存的响应头，浏览器将首次请求的初始余额结果缓存，后续每隔10秒的查询直接读取本地缓存，不会触发新的后端请求，自然无法获取发送短信后的最新余额。重启后端后首次请求会重新拉取数据，所以能看到正确结果。

另外，你的Node.js代码存在不必要的性能损耗：每次请求都重复require('twilio')并实例化客户端，虽然这不是缓存余额的直接原因，但建议优化。

修复步骤

1. 后端添加禁止缓存的响应头

修改Node.js控制器代码，在返回响应时添加缓存控制头，强制浏览器不缓存结果：

require('dotenv').config();
// 全局实例化Twilio客户端，避免重复创建
const client = require('twilio')(process.env.ACCOUNT_SID, process.env.AUTH_TOKEN);

exports.getTwilioAccountBalance = (req, res) => {
  client.balance.fetch()
    .then((data) => {
      const balance = Math.round(data.balance * 100) / 100;
      console.log(`Your account balance is ${balance} ${data.currency}.`);

      // 添加禁止缓存的响应头
      res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
      res.setHeader('Pragma', 'no-cache');
      res.setHeader('Expires', '0');
      
      res.status(200).send({ balance });
    })
    .catch(function(error) {
      console.log(error);
      res.status(500).send({ error: error.message });
    });
};

2. 前端请求添加缓存控制头（可选加固）

在Angular的Twilio服务中，给GET请求添加缓存控制头，进一步避免浏览器缓存：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// ...

getTwilioAccountBalance() {
  const headers = new HttpHeaders({
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache'
  });
  return this.http.get('/api/twilio/balance', { headers });
}