直接在 Vue3 前端代码中调用 ChatGPT API 会导致 API Key 泄露，最安全的做法是通过后端服务中转请求。适用场景为所有生产环境，风险边界在于前端代码完全公开，任何用户均可查看网络请求获取密钥。

命令速用版

本主题属于架构安全调整，无单一命令可解决，以下是快速处理思路：

1. 后端启动示例 (Node.js/Express):
   npm install express axios dotenv
   创建 server.js 配置路由转发请求

2. 前端配置调整 (Vue3):
   修改 axios baseURL 指向后端服务地址
   移除前端代码中所有硬编码的 API Key

为什么会这样

前端代码运行在用户浏览器中，所有网络请求和 Header 信息对用户完全可见。HTTP 协议本身是透明的，任何用户打开浏览器开发者工具的 Network 面板，都能直接看到请求 URL、Header 中的 Authorization 字段以及完整的 API Key。一旦 Key 泄露，攻击者可直接消耗配额或产生高额费用，OpenAI 官方安全建议明确指出密钥不应暴露在客户端。

分步处理

第一步：搭建后端中转服务。使用 Node.js Express 或 Python FastAPI 创建一个新接口，例如 POST /api/chat。在该服务端代码中读取环境变量 OPENAI_API_KEY，并使用服务器端 HTTP 客户端向 OpenAI 发起请求。

第二步：配置服务端环境变量。在生产服务器或本地开发环境的 .env 文件中设置 API Key，确保该文件不被提交到 Git 仓库。验证服务端日志，确认 Key 加载成功且未打印到响应内容中。

第三步：修改 Vue3 请求配置。打开 Vue 项目的 axios 实例配置文件，将 baseURL 从 https://api.openai.com 修改为自有后端地址，例如 http://localhost:3000 或 https://api.yourdomain.com。移除前端代码中所有涉及 sk-... 开头的密钥字符串。

第四步：处理跨域问题。在后端服务中配置 CORS 中间件，允许 Vue 前端域名的访问请求。如果前端部署在 example.com，后端需设置 Access-Control-Allow-Origin 为 example.com。

怎么验证是否生效

打开浏览器开发者工具，切换到 Network 标签页，触发前端聊天功能。检查请求列表中的域名，确认请求目标是自有后端域名而非 openai.com。点击具体请求查看 Headers，确认 Request Headers 中不包含 Authorization: Bearer sk-... 字段，且响应内容正常返回。

常见坑

第一，Vite 环境变量误用。不要在 Vue 项目中使用 VITE_ 开头的环境变量存储 API Key，以 VITE_ 开头的变量会被打包进前端代码，依然存在泄露风险。

第二，后端超时设置。OpenAI 接口响应时间可能较长，后端服务需增加请求超时时间配置，避免前端收到 504 Gateway Timeout 错误。

第三，流式响应处理。如果使用 Stream 模式，后端需正确转发 SSE 数据流，保持 Connection: keep-alive，否则前端无法实时接收打字机效果。

常见问题

前端 .env 文件里的 Key 安全吗？

不安全，以 VITE_ 开头的环境变量会被编译进最终 JavaScript 包中，用户查看源码即可获取。

后端中转会增加多少延迟？

公开资料中没有看到可靠的量化数据，通常增加一次内网或服务器间跳转，延迟增加取决于后端服务器与 OpenAI 服务器的网络距离。

为什么后端报 CORS 错误？

后端服务未配置允许前端域名的跨域头，需在后端代码中显式设置 Access-Control-Allow-Origin 响应头。

可以直接用 Nginx 反向代理吗？

可以，但需在 Nginx 配置中隐藏 API Key，通常建议使用应用层代码管理密钥以便更灵活地控制权限和日志。