React+Axios调用ChatGPT API遇401错误：无法读取.env中API密钥

一、解决.env文件API密钥读取失败（401错误） #

以下是排查和修复步骤：

• 确认.env文件位置：必须放在项目根目录（与package.json同级），不能放在src文件夹内。
• 检查变量命名与格式：
  .env文件内的变量必须以REACT_APP_开头，格式应为：

  REACT_APP_OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
  

  注意：不要给密钥加引号，等号前后不要有空格。
• 重启开发服务器：修改.env文件后，必须停止当前的npm start进程，重新启动才能加载新的环境变量。
• 验证变量是否加载：在Chat组件的getBotMessage函数开头添加日志，确认变量值：

  console.log("API Key:", process.env.REACT_APP_OPENAI_API_KEY);
  

  如果输出undefined，说明环境变量未正确加载，重复上述步骤检查。

二、解决openai包的"Refused to set unsafe header 'User Agent'"错误 #

这个错误是因为浏览器禁止前端脚本修改User-Agent请求头，而openai官方包默认会设置这个头，同时你还存在一个使用错误：

• 使用正确的API方法：gpt-3.5-turbo是聊天模型，应该用createChatCompletion而非createCompletion（后者用于文本补全模型如text-davinci-003）。
• 禁用User-Agent设置：如果坚持在前端使用openai包，可以在Configuration中自定义headers，覆盖默认的User-Agent：

  const configuration = new Configuration({
    apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    baseOptions: {
      headers: {
        'User-Agent': 'Mozilla/5.0' // 或者设置为空字符串，浏览器会自动使用默认值
      }
    }
  });
  

  不过强烈建议：不要在前端直接暴露API密钥，会导致密钥泄露。正确的做法是搭建后端接口，由后端调用OpenAI API，前端只调用自己的后端接口。

额外提示（axios代码优化） #

你的axios调用中，response.data.choices[0].text应该改为response.data.choices[0].message.content，因为gpt-3.5-turbo的聊天接口返回结构是choices[0].message.content而非text，当前写法会导致获取不到正确的响应内容。

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