Next.js 13 POST接口报错:TypeError: Cannot read properties of undefined (reading 'headers')
解决Next.js 13 POST接口返回"Cannot read properties of undefined (reading 'headers')"错误
问题描述
在Next.js 13中实现了表单提交的POST API,用于将表单内容转发至邮箱。邮件能正常发送并接收,但每次请求都会抛出以下错误:
- error TypeError: Cannot read properties of undefined (reading 'headers') at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:261:61) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
问题原因
- 异步响应未正确返回:
transporter.sendMail使用回调函数写法,回调内的return无法被外层的POST异步函数捕获。外层函数执行到sendMail后直接结束,没有返回任何响应,导致Next.js内部尝试处理未定义的响应对象,从而抛出"headers"未定义的错误。 - 参数定义错误:POST函数的第二个参数不是
NextResponse,App Router的路由函数参数仅为request和context(包含路由参数等)。
修复方案
将nodemailer的回调写法改为async/await的Promise形式,确保外层函数能正确返回NextResponse,同时修正参数定义错误。
修复后的代码
import { NextResponse, NextRequest } from "next/server" import nodemailer from "nodemailer" export async function POST(request: NextRequest) { const formData = await request.formData() const emailValue = formData.get("email") const messageValue = formData.get("message") const numberValue = formData.get("phone_number") if (!messageValue || !numberValue || !emailValue) { return NextResponse.json({ message: "请填写所有必填字段!" }, { status: 400 }) } const transporter = nodemailer.createTransport({ service: "gmail", auth: { user: process.env.EMAIL, pass: process.env.PASSWORD, }, tls: { rejectUnauthorized: false, }, }) const mailOptions = { from: `${emailValue}`, to: `${process.env.EMAIL}`, subject: `来自联系页面的消息:${numberValue} - ${emailValue}`, text: `${messageValue}`, } try { await transporter.sendMail(mailOptions) return NextResponse.json({ message: "邮件发送成功!" }, { status: 200 }) } catch (err) { return NextResponse.json({ message: `${err}` }, { status: 500 }) } }
修改说明
- 移除了错误的
response: NextResponse参数,符合App Router的路由函数参数规范 - 用
try/catch包裹transporter.sendMail的异步调用,通过await等待邮件发送完成,确保外层函数能正确返回对应的NextResponse - 统一了错误和成功场景的响应返回逻辑,避免出现未返回响应的情况
内容的提问来源于stack exchange,提问作者Esam Olwan
相关产品推荐
相关产品推荐

