NextJS调用MongoDB POST请求遇Axios 400错误求助

你的代码有几个关键问题导致了400错误，以下是具体分析和修复方案：

1. Axios请求头配置错误 #

Axios的post方法第三个参数是配置对象，请求头必须放在headers子字段中，而不是直接写在配置对象顶层。你当前的写法会让API无法正确识别身份验证密钥和请求格式，直接返回400错误。

2. 异步操作未等待，状态提示被覆盖 #

createAccount是异步函数，但你调用axios.post时没有加await，导致请求还未完成就执行了成功提示代码，错误提示会被立即覆盖，无法看到真实的错误反馈。

3. NextJS环境变量使用不规范（敏感信息风险） #

客户端组件中使用require("dotenv").config()无效，且直接暴露API密钥在客户端代码中会有泄露风险——浏览器能直接读取打包后的代码，敏感密钥应该通过服务端API路由转发。

修正后的客户端代码 #

import styles from "../styles/Home.module.css";
import axios from "axios";

export default function Home() {
  // 客户端环境变量需添加NEXT_PUBLIC_前缀（仅用于非敏感配置，密钥建议走API路由）
  const mongokey = process.env.NEXT_PUBLIC_MONGO_API;

  async function createAccount() {
    const username = document.querySelector("[name=user]").value;
    const email = document.querySelector("[name=email]").value;
    const resultElement = document.getElementById("displayresult1");

    try {
      await axios.post(
        "https://data.mongodb-api.com/app/data-irddk/endpoint/data/v1/action/insertOne",
        {
          collection: "n2D-collection",
          database: "n2D-database",
          dataSource: "Cluster0",
          document: { user: username, email: email }
        },
        {
          headers: {
            "Content-Type": "application/json",
            "api-key": mongokey
          }
        }
      );

      resultElement.innerHTML = "Account Created Successfully";
      console.log("username:", username, "email:", email);
    } catch (error) {
      // 打印详细错误信息，便于排查
      const errorMsg = error.response?.data?.error || error.message;
      console.log("请求失败详情:", errorMsg);
      resultElement.innerHTML = `Error: ${errorMsg}`;
    }
  }

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h3>Create your account</h3>
        <h5>Create your username</h5>
        <input name="user" />
        <h5>Create your email</h5>
        <input name="email" />
        <button
          style={{ marginTop: "2px", marginBottom: "2px" }}
          onClick={createAccount}
        >
          Create account
        </button>
        <h2 id="displayresult1"></h2>
      </main>
    </div>
  );
}

更安全的方案：用NextJS API路由转发请求 #

由于API密钥属于敏感信息，绝对不能暴露在客户端代码中。建议创建服务端API路由处理MongoDB请求：

1. 创建API路由文件 pages/api/create-user.js

import axios from "axios";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "仅支持POST请求" });
  }

  const { username, email } = req.body;
  const mongokey = process.env.MONGO_API; // 服务端可直接读取非NEXT_PUBLIC前缀的环境变量

  try {
    await axios.post(
      "https://data.mongodb-api.com/app/data-irddk/endpoint/data/v1/action/insertOne",
      {
        collection: "n2D-collection",
        database: "n2D-database",
        dataSource: "Cluster0",
        document: { user: username, email: email }
      },
      {
        headers: {
          "Content-Type": "application/json",
          "api-key": mongokey
        }
      }
    );

    res.status(200).json({ message: "Account Created Successfully" });
  } catch (error) {
    res.status(error.response?.status || 500).json({
      error: error.response?.data?.error || "服务器错误"
    });
  }
}

2. 客户端修改请求地址

将createAccount中的Axios请求改为调用本地API路由：

await axios.post("/api/create-user", { username, email });

内容的提问来源于stack exchange，提问作者Márcio