Next.js前端调用创建事件API报400错误，Insomnia请求正常求排查

先修正代码里的明显笔误 #

你的代码中存在语法错误：else if (createEventResponse.status ==- 401) 应改为 else if (createEventResponse.status === 401)，这个错误会导致401状态的判断逻辑失效，但不是400错误的直接原因。

核心排查步骤（针对400错误） #

400错误表示请求格式或数据不符合API要求，结合你用Insomnia能正常请求的情况，重点对比前端发送的请求与Insomnia的差异：

• 检查实际发送的请求数据
  打开浏览器开发者工具的「Network」面板，找到create接口的请求，查看「Request Payload」内容，和Insomnia里的请求体做对比：

  • 确认userId、eventName、eventDate三个字段是否都有有效值，有没有出现undefined或null（前端私有属性this.#userId/this.#name/this.#date可能未正确赋值）
  • 重点核对eventDate的格式：如果API要求YYYY-MM-DD这类字符串，而前端的this.#date是原生Date对象，JSON.stringify会把它转成ISO格式字符串（比如2024-05-20T12:00:00.000Z），这可能不符合API的格式要求，触发400错误。

• 验证请求头的一致性
  对比浏览器请求头和Insomnia的请求头：

  • 确认是否遗漏了API要求的必要头信息（比如Authorization令牌，如果Insomnia里配置了但前端没加，部分API会返回400而非401）
  • 检查Content-Type是否严格为application/json，有没有被浏览器自动修改（比如某些场景下会变成text/plain）

• 排查私有属性的赋值问题
  在createEvent()方法里添加console.log(requestBody)，打印出发送前的请求体对象，确认它和Insomnia里的请求体完全一致，排查私有属性是否未被正确初始化。

• 处理JSON序列化的特殊情况
  如果eventDate是Date对象，手动转换为API要求的格式，例如转成YYYY-MM-DD：

  eventDate: this.#date instanceof Date ? this.#date.toISOString().split('T')[0] : this.#date
  

  或根据API实际要求的格式做对应转换。

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