如何在 next js 13 路由处理程序中获取表单数据

Question

我正在使用 next js 13 路由处理程序来获取登录表单数据。我认为我应该能够使用formData方法获取它，但它返回一个空对象。我的登录页面位于 app/login/page.jsx 中：

export default function Page() {
    return (
        <div>
            <form action="/api" method="post" className="...">
                <input type="text" name="username" id="username" className="..." />
                <input type="password" name="password" id="username" className="..." />
                <input type="submit" id="submit" value="submit" className="..." />
            </form>
        </div>
    )
}

和app/api/route.js：

import { NextResponse } from 'next/server';

export async function POST(request):
    const data = request.formData();
    return NextResposne.json({ data })

这是我提交表格后的回复：

{"data":{}}

任何想法 ？谢谢

Answer 1

您必须从 Response 创建一个新对象，并将其转换为字符串（如果不是）。

import { NextApiRequest, NextApiResponse } from "next";

export async function POST(req: NextApiRequest, res: NextApiResponse) {
const data = await request.formData();
return new Response(JSON.stringify(data))

}

另外，请不要使用ninja code这不是一个好的编码方式。

请为其添加另一个安全选项，在不分析输入数据的情况下获取表单数据非常危险。