基于OpenAI API的聊天机器人部署后出现Axios 404错误求助

问题现象 #

本地localhost运行正常，部署上线后调用后端/chat接口出现Axios 404错误，控制台提示“Cannot POST /chat”，但Web应用其他功能使用相同后端URL可正常工作。

前端代码 #

import {useState} from 'react'
import axios from 'axios'
import LeftSidebar from "../src/components/LeftSidebar/LeftSidebar";
import CGLogo from './assets/chatGPT.png'
import AppLogo from './assets/app-logo.png'
import './Chatbot.css';

function Chatbot() {
 
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    setLoading(true);
    axios
      .post("https://stack-overflow-qfdp.onrender.com/chat", { prompt })
      .then((res) => {
        setResponse(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.error(err);
      });
    
  };


  
  return (
    <div className="home-container-1">
      <LeftSidebar/>
      
      <div className="home-container-2">
    <div className="wrapper">
    <img src={AppLogo} alt="" className="app-logo" />   
    <form  onSubmit={handleSubmit} >
      <img src={CGLogo} alt="" className={loading ? 'cg-logo loading' : 'cg-logo'} />
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Ask anything... :)"
      />
      <button type="submit">Ask</button>
    </form>
    <p className="response-area">
    {loading ? 'loading...' : response}
      {/* Here will be my response  */}
    </p>
    <div className="footer">~ Copyrights ~ Prashant ~</div>
</div>

</div>

</div>
  );
}

export default Chatbot ;

后端代码 #

import express from "express";
import cors from "cors";
import mongoose from "mongoose";
import userRoutes from './routes/users.js'
import questionRoutes from './routes/Questions.js'
import answerRoutes from './routes/Answers.js'
import {config} from 'dotenv'
import dotenv from 'dotenv'
import bodyParser from "body-parser";
import { Configuration , OpenAIApi } from "openai";
import postRoutes from "./routes/post.js";

dotenv.config({path : "./.env"})
dotenv.config();


const app = express();

app.use(bodyParser.json()); 
app.use(express.json({ limit: "30mb", extended: true }));
app.use(express.urlencoded({ limit: "30mb", extended: true }));
app.use(cors({origin: "*",}));




app.get('/',(req, res) => {
     res.send("This is a stack overflow clone API")
 })


 app.use('/user' , userRoutes)
 app.use('/questions' , questionRoutes) 
 app.use('/answer' , answerRoutes)
 app.use("/post", postRoutes);


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


const openai = new OpenAIApi(configuration);
app.post("/chat", async (req, res) => {
  const { prompt } = req.body;
  const completion = await openai.createCompletion({
    model: "text-davinci-003", 
    prompt: prompt,
    max_tokens: 2048,
  });
  res.send(completion.data.choices[0].text);
});

const PORT = process.env.PORT || 5000;

const DATABASE_URL = process.env.CONNECTION_URL

mongoose
.connect( DATABASE_URL,{useNewUrlParser:true , useUnifiedTopology: true})
.then(() => app.listen(PORT , () => {console.log(`server running on port ${PORT}`)}))
.catch((err) => console.log(err.message)) 

报错信息 #

Object { 
  stack: "On@https://stackovrflowclonebyprashant.netlify.app/static/js/main.5970f86a.js:2:333188\nhr</</d/<@https://stackovrflowclonebyprashant.netlify.app/static/js/main.5970f86a.js:2:347719\nd@https://stackovrflowclonebyprashant.netlify.app/static/js/main.5970f86a.js:2:347867\n", 
  message: "Request failed with status code 404", 
  name: "AxiosError", 
  code: "ERR_BAD_REQUEST", 
  config: {…}, 
  request: XMLHttpRequest, 
  response: {…} 
}
code: "ERR_BAD_REQUEST"
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
message: "Request failed with status code 404"
name: "AxiosError"
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
response: Object { data: '\n\n\n\nError\n\n\n<pre>Cannot POST /chat</pre>\n\n\n', status: 404, statusText: "Not Found", … }
stack: "On@https://stackovrflowclonebyprashant.netlify.app/static/js/main.5970f86a.js:2:333188\nhr</</d/<@https://stackovrflowclonebyprashant.netlify.app/static/js/main.5970f86a.js:2:347719\nd@https://stackovrflowclonebyprashant.netlify.app/static/js/main.5970f86a.js:2:347867\n"
: Object { constructor: On(e, t, n, r, a), toJSON: toJSON(), stack: "", … }
constructor: function On(e, t, n, r, a)
isAxiosError: true
stack: ""
toJSON: function toJSON()
length: 0
name: "toJSON"
prototype: Object { … }
: function ()
: Error.prototype { stack: "", … }

排查与解决方案 #

1. 调整路由定义顺序 #

后端代码中/chat路由在其他路由中间件之后定义，若之前的路由（如postRoutes）包含通配符路由（*），会优先拦截请求导致/chat无法命中。

修复： 将/chat路由移到所有app.use路由中间件之前：

// 先定义/chat路由
app.post("/chat", async (req, res) => {
  const { prompt } = req.body;
  const completion = await openai.createCompletion({
    model: "text-davinci-003", 
    prompt: prompt,
    max_tokens: 2048,
  });
  res.send(completion.data.choices[0].text);
});

// 再挂载其他路由中间件
app.use('/user' , userRoutes)
app.use('/questions' , questionRoutes) 
app.use('/answer' , answerRoutes)
app.use("/post", postRoutes);

2. 验证部署环境的环境变量 #

检查部署平台（如Render）的环境变量配置，确认CHATBOT_KEY和CONNECTION_URL已正确设置。环境变量缺失会导致OpenAI初始化或数据库连接失败，间接影响路由响应。

3. 查看后端启动日志 #

检查部署平台的服务启动日志，确认：

• 数据库连接成功
• 服务正常监听指定端口
• 无OpenAI初始化错误

4. 直接测试后端接口 #

用Postman或curl直接请求https://stack-overflow-qfdp.onrender.com/chat：

• 若仍返回404，说明问题在后端路由配置
• 若正常返回，排查前端请求URL是否存在拼写、大小写错误

5. 确认CORS配置 #

当前CORS配置cors({origin: "*",})默认允许所有请求方法，若部署平台有额外CORS限制，需对应调整平台配置。

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