Ionic Angular调用Twilio API发短信出现401鉴权与URL凭证报错求助

安全阿岳

2026-10-20

解决方案

报错原因

第一个URL带凭证的报错：浏览器原生安全策略禁止在fetch请求的URL中嵌入账号:密码格式的认证信息，该写法本身就不被浏览器支持。
第二个401未授权报错：存在两处参数格式不符合Twilio API要求的问题：
1. 请求头Content-Type错误，Twilio短信API要求提交格式为application/x-www-form-urlencoded，你当前用的application/json格式无法被接口识别
2. 请求体格式错误，from、to参数不需要包裹为数组，且需要转为url编码格式而非JSON字符串
3. 额外检查：Basic认证的拼接规则是Account SID:Auth Token，不要把两个值的顺序填反，否则也会触发401

修复后可运行代码

signIn(form){
  // 注意替换为你自己的Account SID、Auth Token、发送号码、接收号码
  const accountSid = '你的Account SID';
  const authToken = '你的Auth Token';
  const fromNumber = '+xxxxx';
  const toNumber = '+xxxxx';

  // 构造url编码格式的请求体
  const body = new URLSearchParams();
  body.set('From', fromNumber);
  body.set('To', toNumber);
  body.set('Body', `${this.contractor.firstName} ${this.contractor.lastName}`);

  fetch(`https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages.json`,{
    method: 'POST',
    headers: {
      'Authorization': 'Basic ' + btoa(`${accountSid}:${authToken}`),
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: body
  })
  .then(response => response.json())
  .then(res => console.log('短信发送成功', res))
  .catch(err => console.error('发送失败', err));
}