NextJS向Strapi v4.5.6发送POST请求时遭遇400 Bad Request错误求助

先排查最直接的问题 #

1. 确认浏览器实际发送的请求体 #

打开浏览器开发者工具（F12）→ 切换到Network标签，找到发送给http://localhost:1337/api/events的POST请求：

• 查看Payload标签，确认是否存在data结构，且字段和代码里的一致。
• 如果Payload为空或格式不对，说明请求体没有正确生成，检查代码中是否有变量未赋值、字符串序列化错误等问题。

2. 确保Strapi的CORS配置生效 #

修改config/middlewares.js中的CORS配置后，必须重启Strapi服务，否则新配置不会生效。
临时测试可以把origin设为*，排除域名限制的问题：

module.exports = [
    // ...
    {
        name: "strapi::cors",
        config: {
            enabled: true,
            headers: "*",
            origin: "*",
        },
    },
    // ...
];

3. 查看Strapi的请求日志 #

打开Strapi的控制台，查看请求详情日志，确认Strapi实际收到的请求体是否包含data字段。如果日志显示请求体为空，说明请求在传输过程中被拦截或修改，可能是浏览器扩展、代理工具的问题。

尝试解决方法 #

方法一：显式指定完整请求头 #

给fetch添加Accept头，确保请求格式被Strapi正确识别：

const res = await fetch("http://localhost:1337/api/events", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Accept": "application/json", // 新增这个头
    },
    body: JSON.stringify({
        data: {
            name: "test",
            description: "test",
            venue: "test",
            address: "test",
            performers: "test",
            time: "test",
            date: "2023-01-12",
        },
    }),
});

方法二：用NextJS API路由做代理 #

客户端直接跨域请求可能存在隐性问题，通过NextJS的API路由作为中间代理：

1. 在pages/api下创建create-event.js：

// pages/api/create-event.js
export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  try {
    const strapiRes = await fetch("http://localhost:1337/api/events", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ data: req.body.data }),
    });
    const data = await strapiRes.json();
    res.status(strapiRes.status).json(data);
  } catch (err) {
    res.status(500).json({ message: 'Internal server error' });
  }
}

2. 客户端请求这个代理路由：

const res = await fetch("/api/create-event", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        data: {
            name: "test",
            description: "test",
            venue: "test",
            address: "test",
            performers: "test",
            time: "test",
            date: "2023-01-12",
        },
    }),
});

方法三：换用Axios测试 #

如果fetch存在兼容性问题，换用axios发送请求，看是否能成功：

import axios from 'axios';

try {
  const res = await axios.post("http://localhost:1337/api/events", {
    data: {
      name: "test",
      description: "test",
      venue: "test",
      address: "test",
      performers: "test",
      time: "test",
      date: "2023-01-12",
    },
  });
  console.log(res.data);
} catch (err) {
  console.error(err.response.data);
}

最后确认权限 #

再次检查Strapi中events集合的权限：

• 进入Strapi后台→Settings→Roles & Permissions→Public角色
• 找到events的权限，确保create权限已勾选并保存

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