Next.js表单提交至Notion时出现405(Method Not Allowed)错误求助

问题概述 #

开发表单提交至Notion的项目时，点击提交按钮出现错误：contact.jsx?287f:14 POST http://localhost:3000/contact 405 (Method Not Allowed)，无法完成数据提交。

错误原因分析 #

1. API路由路径不匹配：前端请求指向/contact，但Next.js的API路由文件位于pages/api/contact.js，正确路径应为/api/contact。当前请求被路由到页面路由（仅支持GET方法），因此返回405错误。
2. Notion数据库ID格式错误：后端代码中database_id使用了完整的Notion页面URL，而Notion API要求传入纯数据库ID（即URL中notion.so/后的字符串）。
3. 前端请求缺少必要头信息：POST JSON数据时未设置Content-Type: application/json，可能导致后端无法正确解析请求体。

修复步骤 #

1. 修正前端请求配置 #

修改contact.jsx中的submitForm函数，调整路由路径并添加请求头：

const submitForm = async (e) => {
  e.preventDefault();
  console.log(process.env.NEXT_PUBLIC_API_URL);
  const res = await fetch(`/api/contact`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ 
      name,
      email,
      subject,
      message 
    }),
  });
  if (res.ok) {
    alert('Your response has been received!');
    setName('');
    setEmail('');
    setSubject('');
    setMessage('');
  } else {
    alert('There was an error. Please try again in a while.');
  }
};

2. 修正Notion数据库ID #

打开Notion数据库页面，复制URL中notion.so/后的纯ID（例如62xxxxx713xx），替换api/contact.js中的对应字段：

parent: {
  database_id: '62xxxxx713xx', // 仅保留纯ID，移除完整URL
},

3. 优化后端请求体解析（可选） #

Next.js会自动解析JSON请求体，可简化后端代码中的请求体处理：

// 替换原JSON.parse(req.body)的写法
const { name, email, subject, message } = req.body;

4. 验证Notion权限 #

确认你的Notion API密钥（secret_xxxxxxxxxxxxxxxxxxxxx）拥有目标数据库的编辑权限，且数据库属性名称（Name、Email、Subject、Message）与代码完全一致（大小写敏感）。

测试验证 #

重启Next.js开发服务器后重新提交表单：

• 成功提交时会弹出提示，Notion数据库将新增对应记录。
• 若仍有错误，查看服务器控制台日志，排查Notion API调用的具体问题（如权限不足、属性不匹配等）。

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