React.js调用OpenAI接口返回404 Not Found求助

问题背景 #

此前功能正常运行，调整文件结构并修改脚本后，/api/generate路由无法正常响应。已验证OpenAI连接正常（通过打印模型测试），问题集中在路由层面。

相关代码 #

App.js中的API调用代码 #

async function onSubmit(event) {
  if (event) {
    event.preventDefault();
  }
  const response = await fetch("/api/generate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ headline: openAIInstructions }),
  });
  const data = await response.json();
  setResult(data.result);
  console.log(currentRound);
}

pages/api/generate.js中的后端代码 #

import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
  apiKey: process.env.REACT_APP_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

export default async function (req, res) {
  const completion = await openai.createCompletion("text-davinci-002", {
    prompt: generatePrompt(req.body.headline),
    temperature: 1,
    max_tokens: 200,
  });
  const responseData = { result: completion.data.choices[0].text };
  res.setHeader("Content-Type", "application/json");
  res.status(200).send(JSON.stringify(responseData));
}

function generatePrompt(headline) {
  return headline;
}

当前package.json脚本配置 #

"scripts": {
  "dev": "NODE_OPTIONS=--openssl-legacy-provider",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "deploy": "serve -s build"
}

已尝试操作 #

• 调整文件结构
• 修改路由路径
• 添加Express的app.post配置

解决方案建议 #

1. 确认项目类型与路由规则匹配

   • 原pages/api目录结构是Next.js的专属API路由机制，若当前切换为纯Create React App项目，默认不支持该路由规则，需自行搭建Express后端处理/api请求。
   • 检查项目依赖：若为Next.js，package.json应有next依赖，dev脚本需改为next dev；若为纯React项目，需单独启动Express服务，并修改fetch请求地址为后端完整域名（如http://localhost:3001/api/generate）。

2. 修正脚本配置错误

   • 当前dev脚本仅设置环境变量，缺少启动命令，修改为：

     "dev": "NODE_OPTIONS=--openssl-legacy-provider react-scripts start"
     

3. 捕获请求错误详情

   • 在API调用函数中添加错误捕获，定位具体问题：

     async function onSubmit(event) {
       if (event) {
         event.preventDefault();
       }
       try {
         const response = await fetch("/api/generate", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
           body: JSON.stringify({ headline: openAIInstructions }),
         });
         if (!response.ok) {
           throw new Error(`HTTP错误！状态码：${response.status}`);
         }
         const data = await response.json();
         setResult(data.result);
         console.log(currentRound);
       } catch (error) {
         console.error("API调用失败：", error);
       }
     }
     

   • 查看浏览器Network面板，确认请求的状态码（如404表示路由不存在）和响应内容。

4. 验证环境变量加载

   • 确保.env文件中REACT_APP_OPENAI_API_KEY配置正确，且项目重启后变量已生效。

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