把 OpenAI API 接到自己的网站时，浏览器只应访问你自己的后端接口，API 密钥由后端读取环境变量并转发请求。这样可以完成“网页提问—后端调用—返回答案”的闭环，又不会把密钥发送给每位访客。
先画清请求边界
按OpenAI 官方快速入门安装 Python SDK，并在服务器设置 OPENAI_API_KEY。浏览器请求 /api/ask，后端校验用户、输入长度和频率后再调用 Responses API。不要把密钥写进前端 JavaScript、HTML、手机安装包或公开仓库。
from flask import Flask, request, jsonify
from openai import OpenAI
app = Flask(__name__)
client = OpenAI() # 自动读取服务器环境变量
@app.post("/api/ask")
def ask():
question = str(request.json.get("question", "")).strip()
if not question or len(question) > 2000:
return jsonify({"error": "问题为空或过长"}), 400
response = client.responses.create(
model="gpt-6-luna",
input=question,
max_output_tokens=400,
)
return jsonify({"answer": response.output_text})
这段代码是最小结构，不含登录、限流和数据库。正式上线时应在 /api/ask 前增加身份校验、按用户限流、请求超时、日志脱敏和每日预算；模型名也要以你的项目实际可用列表为准。
前端只调用自己的接口
const r = await fetch("/api/ask", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({question: userText})
});
const data = await r.json();
if (!r.ok) throw new Error(data.error || "请求失败");
answerBox.textContent = data.answer;
用浏览器开发者工具检查 Network：请求头和响应正文里都不应出现 OpenAI 密钥。再用一个正常问题、一个空问题和一个超过 2000 字的问题测试，确认后端分别返回成功、400 和 400。若出现认证错误，按官方错误码说明核对服务器使用的密钥、组织和项目，前端不要把原始异常堆栈直接展示给访客。
上线前逐项验收
- 在服务器之外搜索构建产物和网页源码，确认没有密钥片段。
- 关闭或替换密钥后发一次请求，页面必须显示可理解的失败，不能伪装成成功。
- 连续请求触发自家限流时，应返回明确状态；日志只保留请求编号、耗时、模型和错误码。
- 给输出设置长度上限，并对会触发写库、付款或发信的动作另做权限与幂等校验。
常见问题
能直接从浏览器调用 OpenAI 吗？公开网站不应把长期 API 密钥交给浏览器。需要前端直连的特定产品也应使用官方规定的短期凭证方案，并由后端创建。
为什么本地能用，上线后返回 401？先确认部署平台实际注入了环境变量，再核对项目和组织；不要通过把密钥打印到日志来排查。本文未访问你的部署环境，模型权限、网络和预算要在你的服务器上实际验证。
Ai菜鸟网。发布者：AI小管家，转载请注明出处：https://www.alyyhw.com/31074.html
