React集成OpenAI API出现404错误，请求问题排查

我正在按照教程将ChatGPT集成到React+Node.js应用中，完成所有步骤后，在输入框提交prompt时出现如下错误：

以下是我的代码文件供参考：

ChatGpt.js文件 #

import React, { useState } from 'react';
import axios from 'axios';

const ChatGPT = () => {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');

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

    try {
      const result = await axios.post('', { prompt: input });
      setResponse(result.data.text);
    } catch (error) {
      console.error(error);
      setResponse('An error occurred while processing your request.');
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label htmlFor="input">Input:</label>
        <input
          type="text"
          id="input"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
      <div>
        <h3>Response:</h3>
        <p>{response}</p>
      </div>
    </div>
  );
};

export default ChatGPT;

server.js文件 #

const express = require('express');
const app = express();
const port = 3000;
const openai = require('openai');
openai.apiKey = "My-API-Key";

app.get('', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

app.use(express.json());

app.post('', async (req, res) => {
  const prompt = req.body.prompt;

  try {
    const response = await openai.Completion.create({
      engine: 'text-davinci-002',
      prompt: prompt,
      max_tokens: 50,
      n: 1,
      stop: null,
      temperature: 0.5,
    });

    res.json({ text: response.choices[0].text });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'An error occurred while processing your request.' });
  }
});

我不确定是什么原因导致了这个错误。

1. 请求目标地址错误 #

React代码中axios.post('', { prompt: input })的URL为空，会默认请求当前前端页面的URL，而非Node后端接口。需修改为后端服务的完整地址：

const result = await axios.post('http://localhost:3000', { prompt: input });

2. 中间件加载顺序错误 #

Node代码中app.use(express.json())放在了app.listen()之后，导致JSON请求体解析中间件未生效，后端无法获取req.body.prompt。需调整顺序，将中间件挂载放在路由定义前：

const express = require('express');
const app = express();
const port = 3000;
const openai = require('openai');
openai.apiKey = "My-API-Key";

// 先挂载JSON解析中间件
app.use(express.json());

app.get('', (req, res) => {
  res.send('Hello World!');
});

app.post('', async (req, res) => {
  const prompt = req.body.prompt;

  try {
    const response = await openai.Completion.create({
      engine: 'text-davinci-002',
      prompt: prompt,
      max_tokens: 50,
      n: 1,
      stop: null,
      temperature: 0.5,
    });

    res.json({ text: response.choices[0].text });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'An error occurred while processing your request.' });
  }
});

// 最后启动服务
app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

3. 跨域问题（可能触发） #

如果前端与后端运行在不同端口，需处理跨域。在Node端安装cors包：

npm install cors

然后在server.js中添加：

const cors = require('cors');
app.use(cors());

将其放在app.use(express.json())之后即可。

4. OpenAI API兼容问题 #

当前代码使用的旧版SDK及text-davinci-002模型已被弃用，建议升级到新版SDK并使用兼容模型：

npm install openai@latest

修改server.js中的OpenAI初始化与调用逻辑：

const { OpenAI } = require('openai');
const openai = new OpenAI({
  apiKey: "My-API-Key",
});

// ...

const response = await openai.completions.create({
  model: 'gpt-3.5-turbo-instruct',
  prompt: prompt,
  max_tokens: 50,
  n: 1,
  stop: null,
  temperature: 0.5,
});

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