基于OpenAI API搭建ChatGPT遇Node.js 404及React Fetch失败问题求助

错误原因分析 #

1. 404 Not Found：服务器仅配置了POST /chat接口，若通过GET方式访问（比如浏览器直接输入地址）会返回404；你的React代码用的是POST请求，这个错误大概率是测试时误操作导致，核心问题在服务器端的OpenAI API调用逻辑。
2. Failed to fetch：服务器端接口存在逻辑错误，导致请求无法正常响应，进而触发前端的fetch失败。

具体修复步骤 #

1. 修复Node.js服务器的OpenAI API调用（script.js） #

OpenAI v4版本的chat.completions.create接口参数和响应结构与旧版本不同，你的代码存在两处关键错误：

• 错误使用prompt参数：gpt-3.5-turbo模型需要用messages数组传递对话内容，而非prompt。
• 错误解析响应结构：v4版本的响应直接返回choices数组，无需通过response.data获取，且返回的内容在message.content中，不是text。

修改后的script.js：

require("dotenv").config();
const OpenAI = require("openai");
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

const express = require("express");
const cors = require("cors");
const app = express();
const port = 3001;

// 用express内置的json解析替代body-parser
app.use(express.json());
app.use(cors());

app.post("/chat", async (req, res) => {
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      // 使用messages数组传递用户消息
      messages: [
        { role: "user", content: req.body.message }
      ],
      max_tokens: 10,
    });

    // 正确解析响应内容
    if (response.choices && response.choices.length > 0) {
      res.json({
        message: response.choices[0].message.content.trim()
      });
    } else {
      res.status(500).json({ message: "未获取到有效响应" });
    }
  } catch (err) {
    console.error("OpenAI API调用错误:", err);
    res.status(500).json({ message: "服务器内部错误" });
  }
});

app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

2. 修复React前端代码（chat.js） #

• 给useState设置初始空字符串，避免textarea出现undefined值。
• 优化catch逻辑，确保错误信息能正确打印。

修改后的chat.js：

import React, { useState } from "react";

export default function Chat() {
  // 初始值设为空字符串
  const [message, setMessage] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    fetch("http://localhost:3001/chat", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ message }),
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
        return res.json();
      })
      .then((data) => setResponse(data.message))
      .catch(err => console.log("Failed to connect:", err));
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="输入消息..."
        ></textarea>
        <button type="submit">Send</button>
      </form>
      {response && <div>响应：{response}</div>}
    </>
  );
}

3. 其他注意事项 #

• 确保服务器项目根目录下已创建.env文件，且OPENAI_API_KEY配置正确。
• 运行npm install确保所有依赖都已安装完成。
• 用node script.js启动服务器，确认控制台输出server running on port 3001。

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