使用Next.js与MongoDB时出现AxiosError 500错误，求解决方案

1. 修复API路由的错误处理与逻辑问题 #

你的API代码缺少错误捕获机制，且未处理非POST请求，这是导致500错误的核心原因。修改后的代码如下：

import { MongoClient } from "mongodb";

async function handler(req, res) {
  // 处理非POST请求
  if (req.method !== "POST") {
    return res.status(405).json({ message: "仅支持POST请求" });
  }

  try {
    const data = req.body;
    console.log("接收的数据:", data);

    // 替换为你的真实MongoDB用户名和密码
    const client = await MongoClient.connect(
      "mongodb+srv://你的真实用户名:你的真实密码@cluster0.df9aj2h.mongodb.net/quiz?retryWrites=true&w=majority"
    );

    const db = client.db();
    const dataCollection = db.collection("authentication");
    const result = await dataCollection.insertOne(data); // 若无需嵌套数据结构，移除外层{data}包裹
    console.log("插入结果:", result);

    client.close();
    res.status(201).json({ message: "数据保存成功" });
  } catch (error) {
    console.error("服务器错误详情:", error);
    res.status(500).json({ message: "服务器内部错误", error: error.message });
  }
}

export default handler;

关键修改说明： #

• 修正函数名拼写：haandler改为handler，避免代码混乱
• 添加try-catch块：捕获MongoDB连接、数据插入过程中的所有异常，返回明确错误信息
• 处理非POST请求：返回405状态码，避免无响应引发的异常
• 可选调整：根据业务需求决定是否将数据嵌套在data字段下

2. 增强前端请求的错误捕获 #

在前端组件中添加错误处理，便于快速定位请求问题：

import axios from "axios";
const Authentication = () => {
  const dataGether = async (data: {
    name: string;
    email: string;
    password: string;
    score: number;
  }) => {
    try {
      const response = await axios.post("/api/pj-api", data);
      console.log("请求成功:", response.data);
    } catch (error) {
      console.error("请求失败详情:", error.response?.data || error.message);
    }
  };

  return <FormItem onDataGetter={dataGether} />;
};

export default Authentication;

3. 额外排查步骤 #

• 确认MongoDB连接字符串中的用户名和密码真实有效，且目标数据库quiz已创建
• 检查MongoDB Atlas的IP白名单：确保当前开发环境/服务器的IP已添加至白名单，即使开放0.0.0.0/0也需确认设置生效
• 查看Next.js服务器控制台日志：通过npm run dev启动项目，查看API路由打印的错误信息，这是定位问题最直接的方式

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