React+gh-pages部署OpenAI API密钥遭自动轮换，如何正确使用？

问题根源 #

你当前的代码直接在前端请求OpenAI API，并且把API密钥通过React环境变量注入到前端代码中。React在生产构建时会将process.env.REACT_APP_OPENAI_API_KEY直接替换为密钥明文，打包后的静态文件部署到gh-pages后，任何人都能通过浏览器开发者工具查看到密钥，OpenAI的安全检测系统也会抓取到这个密钥，因此触发了自动轮换机制。

正确做法：通过后端代理中转请求 #

绝对不能在前端代码中直接使用OpenAI API密钥，必须搭建一个后端服务作为代理，由后端负责调用OpenAI API，前端只与你的后端接口交互。

1. 搭建后端代理示例（Node.js/Express） #

创建一个简单的后端服务，将OpenAI密钥存在后端的环境变量中：

const express = require('express');
const fetch = require('node-fetch');
require('dotenv').config();

const app = express();
app.use(express.json());

app.post('/api/chat', async (req, res) => {
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
      },
      body: JSON.stringify(req.body)
    });
    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

• 后端的.env文件中添加OPENAI_API_KEY=你的密钥，并确保.env被加入.gitignore。

2. 调整前端代码 #

前端不再直接请求OpenAI的API，改为请求你的后端接口：

const DEFAULT_PARAMS = {
  model: "gpt-3.5-turbo",
  messages: [{
    "role": "user",
    "content": message
  }],
  temperature: 1,
  max_tokens: 1000
};
const params_ = {...DEFAULT_PARAMS};
// 替换为你的后端接口地址
const result = await fetch('/api/chat', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(params_)
});
const data = await result.json();

3. 部署后端服务 #

你可以将后端部署到Vercel、Render、Heroku等平台，或者自己的服务器上。部署时记得在平台的环境变量设置中添加OPENAI_API_KEY，不要将密钥提交到代码仓库。

额外注意事项 #

• 永远不要将OpenAI API密钥暴露在前端代码、客户端存储（localStorage、cookie等）中。
• 可以给后端接口添加简单的鉴权逻辑（比如自定义API密钥验证），防止他人滥用你的后端服务。

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