Next.js API开发疑问：直接访问路由为何返回400状态码？

我正在使用Next.js开发一个简易应用，学习创建API时遇到了问题。表单提交数据到API正常，但直接访问localhost:3000/api/events时返回400错误。

用于添加事件的组件代码： #

import React from 'react'
import Layout from '@/components/Layout'
import styles from '@/styles/AddEvent.module.css'

export default function AddEventPage() {

  const submitHanlder = (e) => {
    e.preventDefault();
    const formData = {
      title: e.target.title.value,
      description: e.target.description.value
    }

    fetch('/api/events', {
      method: 'POST',
      body: JSON.stringify(formData)
    });
    console.log(formData)
  }

  return (
    <Layout title='Add New Event'>
        <h1>Add Event</h1>
        <div className={styles.container}>
          <form className={styles.form} action="" onSubmit={submitHanlder}>
            <label className={styles.label}  >Title</label>
            <input type="text" name="title" />
            <label className={styles.label} >Description</label>
            <input type="text" name="description"/>
            <label className={styles.label}htmlFor="">Date</label>
            <input type="date" />
            <button type='submit' >Submit</button>
          </form>
        </div>
    </Layout>
  )
}

API路由文件api/events.js代码： #

const handler = (req , res) => {

    if(req.method === 'POST'){
        return res.status(201).json({ message: 'evento agregado' });
    }
    return res.status(400).json({ error: 'no se pudo agregar el evento' });
}

export default handler;

测试情况： #

• 表单提交后，控制台显示请求数据：

  {"title":"asdasd","description":"asdasdas"}
  

  响应信息：

  message "evento agregado"
  

• 直接访问localhost:3000/api/events时，返回：

  error   "no se pudo agregar el evento"
  

原因及解决方案： #

直接访问API路由时，浏览器默认发送的是GET请求，而你的API路由仅处理POST请求：

• 表单提交时，你通过fetch明确指定了method: 'POST'，因此进入POST请求处理分支，返回201状态码和成功消息。
• 直接访问时，请求方法为GET，不满足POST的判断条件，触发默认返回逻辑，返回400状态码和错误信息。

如果需要支持GET请求（比如直接访问时返回事件列表），可以在API路由中添加GET请求的处理逻辑，同时建议将默认错误状态码改为符合HTTP规范的405（Method Not Allowed，不支持的请求方法）：

const handler = (req , res) => {
    if(req.method === 'POST'){
        return res.status(201).json({ message: 'evento agregado' });
    }
    if(req.method === 'GET'){
        // 这里可以编写GET请求的处理逻辑，比如返回事件列表
        return res.status(200).json({ message: '获取事件列表成功' });
    }
    return res.status(405).json({ error: '不支持的请求方法' });
}

export default handler;

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