使用HTML/JavaScript调用OpenAI接口失败，替换API Key后仍无响应求排查

首先明确：完全可以仅通过HTML和JavaScript实现你的需求，你的代码无法正常运行主要是存在以下几个关键问题：

1. 未引入OpenAI官方JavaScript SDK #

你直接使用了new OpenAI()构造函数，但浏览器环境默认不包含这个对象，必须先引入官方提供的JavaScript库。需要在自定义脚本前添加引入代码：

<script src="https://cdn.jsdelivr.net/npm/openai@4.0.0/dist/index.min.js"></script>

2. OpenAI客户端配置错误 #

• 新版SDK无需手动指定endpointURL，默认会使用正确的API地址，多余配置会导致请求异常。
• 必须添加dangerouslyAllowBrowser: true配置，允许在浏览器环境中初始化客户端（注意：生产环境不建议这么做，存在API密钥泄露风险）。

3. 模型调用方法与参数不匹配 #

• 旧版davinci模型已逐步被替代，推荐使用能力相近的gpt-3.5-turbo-instruct模型。
• 新版SDK中，Completion接口的调用方法为openai.completions.create，而非旧版的client.createCompletion。
• 参数名需使用下划线分隔（如max_tokens），而非驼峰式写法。

4. 缺少错误处理与基础校验 #

没有添加异常捕获逻辑，无法排查API密钥错误、配额不足、网络问题等故障；也未对空prompt做校验，容易触发无效请求。

修正后的完整代码 #

<html>
<body>
 <h1>OpenAI Text Generator</h1>

 <textarea id="prompt-text-field" placeholder="输入你的prompt内容..."></textarea>

 <button type="button" id="generate-text">生成文本</button>

 <textarea id="response-text-field" readonly placeholder="生成结果将显示在这里..."></textarea>

 <!-- 引入OpenAI官方SDK -->
 <script src="https://cdn.jsdelivr.net/npm/openai@4.0.0/dist/index.min.js"></script>

 <script>
  // 初始化OpenAI客户端
  const openai = new OpenAI({
   apiKey: "YOUR_API_KEY", // 替换为你的API密钥
   dangerouslyAllowBrowser: true
  });

  // 绑定按钮点击事件
  document.getElementById("generate-text").addEventListener("click", async () => {
   const prompt = document.getElementById("prompt-text-field").value.trim();
   const responseField = document.getElementById("response-text-field");
   
   // 空prompt校验
   if (!prompt) {
     responseField.value = "请输入有效的prompt！";
     return;
   }

   responseField.value = "正在生成内容...";

   try {
    const response = await openai.completions.create({
     model: "gpt-3.5-turbo-instruct",
     prompt: prompt,
     max_tokens: 100
    });
    responseField.value = response.choices[0].text.trim();
   } catch (error) {
    responseField.value = `生成失败: ${error.message}`;
    console.error("请求详情:", error);
   }
  });
 </script>
</body>
</html>

关键注意事项 #

• API密钥安全：直接在前端代码中暴露API密钥存在极高风险，任何人都可通过查看源码获取并滥用你的账户。生产环境必须通过自建后端服务中转请求，避免密钥泄露。
• 模型权限：确保你的OpenAI账户有权限使用指定模型，部分旧模型可能已被官方淘汰。
• CORS问题：OpenAI API默认允许跨域请求，若遇到CORS错误，优先检查API密钥有效性，或通过后端代理解决。

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