英文:
Cannot access body in a HTTP post through NextJS
问题
我认为我正在忽略一些显而易见的东西，但我需要另一个头脑来帮助我解决这个问题。
我的目标是访问 POST 请求的正文，就像在下面这个页面中所示。
https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms
// 根文件夹中的 page.js 文件
//===========================
import Image from 'next/image'
import styles from './page.module.css'
export default function Home() {
return (
<main className={styles.main}>
<div className={styles.description}>
<p>
<form action="/route" method="post">
<label for="first">First name:</label>
<input type="text" id="first" name="first"/><br/><br/>
<label for="last">Last name:</label>
<input type="text" id="last" name="last"/><br/><br/>
<input type="submit" value="Submit"/>
</form>
</p>
</div>
</main>
)
}
// /response/response.js
// ===========================
import { NextResponse } from 'next/server';
export async function GET(req, res) {
console.log("====GET====");
console.log(req.body);
return NextResponse.json("get");
}
export async function POST(req) {
const body = req.body;
console.log(body);
return NextResponse.json("post");
}
我填写表单，浏览器正确路由到“post”响应，当我提交时，“get”响应列出。但是，在服务器端，响应正文被记录为：
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
当我阅读链接以及关于 nextjs 和处理 POST 请求的所有其他文档时，正文的内容就像它是一个对象，而不是可读流。此外，我找不到 nextjs 网站上显示如何解码可读流的任何内容，这似乎对于常见任务来说有点复杂。
我相当确定我忽略了一些平凡的细节，比如放错了小数点，但我需要帮助找到它。
非常感谢各位！
Chris Roode
英文:
I think I'm missing something obvious, but I need another head to get me unstuck.
My objective: get access to the body of a POST request as shown in this page from nextjs.
https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms
// root folder page.js file
//===========================
import Image from 'next/image'
import styles from './page.module.css'
export default function Home() {
return (
<main className={styles.main}>
<div className={styles.description}>
<p>
<form action="/route" method="post">
<label for="first">First name:</label>
<input type="text" id="first" name="first"/><br/><br/>
<label for="last">Last name:</label>
<input type="text" id="last" name="last"/><br/><br/>
<input type="submit" value="Submit"/>
</form>
</p>
</div>
</main>
)
}
// /response/response.js
// ===========================
import { NextResponse } from 'next/server';
export async function GET(req, res) {
console.log("====GET====");
console.log(req.body);
return NextResponse.json("get");
}
export async function POST(req) {
const body = req.body;
console.log(body);
return NextResponse.json("post");
}
I fill out the form, and the browser routes correctly to the 'post' response, and the 'get' response lists when I submit. However, on the server side, the response body is logged:
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
When I read the link, and all other documentation on nextjs and handling POST requests, the contents of the post as if it's an object, and not a readable stream. Furthermore, I can't find anything on nextjs's website showing how to decode the readable stream, which seems a bit extensive of a solution for a common task.
I'm pretty sure I'm missing some mundane detail, like putting a decimal point in the wrong place, but I need help finding it.
Thanks a bunch peoples!
Chris Roode
答案1
得分: 2
由于您正在以application/x-www-form-urlencoded格式提交表单，您可以按以下方式访问表单数据：
export async function POST(req) {
const data = await req.formData();
const firstName = data.get("first");
const lastName = data.get("last");
console.log({ firstName, lastName });
return NextResponse.json("post");
}
英文:
Since you are submitting your form as application/x-www-form-urlencoded, you can access your form data as follows:
export async function POST(req) {
const data = await req.formData();
const firstName = data.get("first");
const lastName = data.get("last");
console.log({ firstName, lastName });
return NextResponse.json("post");
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论