Axios POST请求出现ERR_BAD_REQUEST错误求助

问题详情 #

我的Axios POST方法无法正常运行，控制台输出ERR_BAD_REQUEST错误。对照教程代码反复确认过，和教程里能正常运行的代码完全一致，但我的就是不行。

前端提交代码 #

const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
        setLoading(true);
        const response = await axios.post('/api/stores', values);

        console.log(response.data)
    } catch (error: any) {
        console.error(error);
    } finally {
        setLoading(false);
    }
};

后端API路由代码（api/stores/route.ts） #

import prismadb from "@/lib/prismadb";
import { auth } from "@clerk/nextjs";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
    try {
        const { userId } = auth();
        const body = req.json();

        const { name }: any = body;

        if (!userId) { 
            return new NextResponse("Unauthorized", { status: 401 });
        }

        if (!name) {
            return new NextResponse("Name is required", { status: 400 });
        }

        const store = await prismadb.store.create({
            data: {
                name,
                userId
            },
        });

        return NextResponse.json(store);

    } catch(error) {
        console.log('[STORES_POST]', error);
        return new NextResponse("Internal error", { status: 500 });
    }
};

问题原因及解决办法 #

核心问题出在后端代码的req.json()调用上——这是一个异步方法，你没有添加await关键字，导致body实际上是一个Promise对象，而非解析后的JSON数据。此时解构name会得到undefined，触发了if (!name)的判断逻辑，返回400状态码，也就是前端看到的ERR_BAD_REQUEST。

修改后端POST方法，给req.json()加上await：

const body = await req.json();

另外，建议避免使用any类型断言，最好定义接口来规范请求体结构，示例如下：

interface StoreRequestBody {
  name: string;
}

const { name } = await req.json() as StoreRequestBody;

这样能避免类型相关的潜在问题，也更符合TypeScript的最佳实践。

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