基于OpenAI API的AI聊天应用调用/api/chat/sendMessage时出现404错误

以下是针对你遇到的404错误的核心排查点及修复方案：

1. API路由文件路径不符合Next.js规范 #

Next.js App Router模式下，API路由必须遵循app/api/[route]/route.js的目录结构。你当前的sendMessage.js文件位置错误，需要调整为：

app/
└── api/
    └── chat/
        └── sendMessage/
            └── route.js

2. API路由写法适配App Router #

你当前的代码采用了Pages Router的默认handler写法，App Router要求显式导出对应HTTP方法的函数（如POST），修正后的API代码如下：

import { OpenAIEdgeStream } from "openai-edge-stream";

export const runtime = 'edge';

export async function POST(req) {
  try {
    // 修正：req.json()是异步方法，需要await调用
    const { message } = await req.json();
    const stream = await OpenAIEdgeStream('https://api.openai.com/v1/chat/completions', {
      headers: {
        'content-type': 'application/json',
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`
      },
      method: "POST",
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [{ content: message, role: "user" }],
        stream: true
      })
    });
    return new Response(stream);
  } catch (e) {
    console.error("发送消息时出错", e);
    // 增加错误响应返回，便于前端排查
    return new Response(JSON.stringify({ error: e.message }), { status: 500 });
  }
}

3. 前端代码的拼写错误 #

你的page.tsx中提交函数名拼写错误：handleSumbit应为handleSubmit，这会导致表单提交逻辑无法触发，修正后：

const handleSubmit = async (e) => {
  e.preventDefault();
  console.log("MessageText:", messageText);
  const response = await fetch("/api/chat/sendMessage", {
      method:'POST',
      headers:{
          'content-type': 'application/json',
      },
      body: JSON.stringify({message: messageText}),
  });
  
  const data= response.body;
  if(!response.ok){
    throw new Error("API请求失败");   
  }
  const reader= data.getReader();
  await streamReader(reader, (message) =>{
      console.log("Message AI:", message)
  });
}

验证步骤 #

1. 确认API路由文件路径和文件名完全符合要求
2. 重启Next.js开发服务器（避免缓存问题）
3. 测试表单提交，检查控制台是否有新的错误信息

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