Angular调用OpenAI API时Bearer授权头异常问题求助

• 验证环境变量加载情况
  先确认environment.OPENAI_SECRET_KEY是否正确获取到值。在请求代码前添加日志：

  console.log('OpenAI Key:', environment.OPENAI_SECRET_KEY);
  

  打开浏览器控制台查看输出：

  • 如果为空，检查environment.ts/environment.prod.ts文件中密钥的拼写是否正确，是否有多余空格或引号错误。
  • 如果值存在，确认密钥本身是否和OpenAI后台复制的完全一致，没有遗漏字符。

• 修正请求头构造方式
  Angular的HttpHeaders是不可变对象，链式调用能避免潜在的初始化问题。修改头信息构造代码：

  const headers = new HttpHeaders()
    .set('Content-Type', 'application/json')
    .set('Authorization', `Bearer ${environment.OPENAI_SECRET_KEY.trim()}`);
  

  注意添加.trim()去除密钥可能存在的首尾空格。

• 检查HTTP拦截器的影响
  项目中如果存在HttpInterceptor，可能会修改或移除请求头。查看app.module.ts或其他配置文件中注册的拦截器，确认是否有逻辑对Authorization头进行了修改、过滤或覆盖。例如某些拦截器可能只允许向特定域名的请求携带认证头。

• 验证密钥有效性与权限

  • 登录OpenAI后台，确认密钥状态为启用，没有被禁用或删除。
  • 检查账户额度是否充足，额度耗尽时也可能返回类似的“未提供密钥”错误（实际是权限不足的误导性提示）。
  • 确认密钥拥有调用text-davinci-003模型的权限（通常默认权限包含该模型，但特殊限制的密钥除外）。

• 建议：通过后端代理请求
  前端直接暴露API密钥存在严重安全风险，任何用户都能通过浏览器控制台获取密钥并滥用。正确的做法是搭建后端代理：

  1. 后端创建接口接收前端请求，在后端代码中携带OpenAI密钥调用API。
  2. 前端调用自己的后端接口，避免直接请求OpenAI的API。
     这种方式不仅解决了密钥安全问题，还能避免前端请求时可能出现的跨域、头信息被篡改等问题。

内容的提问来源于stack exchange，提问作者Franck Gomez