使用SvelteKit+Prisma提交隐藏输入数据时遭遇400错误求助

核心问题分析 #

你遇到的400错误主要来自两个关键问题：

• 表单提交的gamesWon和lowestGuesses是字符串类型，但后端代码用typeof判断是否为number，直接触发错误返回
• 未处理playerName cookie为空的情况，后续Prisma更新操作会直接失败

修正步骤 #

1. 转换表单数据类型：从FormData获取的值默认是字符串，需手动转为数字
2. 增加cookie存在性校验：确保playerName存在再执行数据库操作
3. 完善错误捕获逻辑：覆盖Prisma操作可能出现的异常（比如玩家不存在）

修改后的后端代码（random/+page.server.ts） #

import prisma from "$lib/prisma";
import { fail, redirect } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions = {
    default: async ({ request, cookies }) => {
        const data = await request.formData();

        // 转换为数字，处理空值/非数字情况
        const gamesWon = Number(data.get("gamesWon"));
        const lowestGuesses = Number(data.get("lowestGuesses"));
        const name = cookies.get('playerName');

        // 校验玩家名称是否存在
        if (!name) {
            return fail(400, { missingName: true });
        }

        // 校验数值是否为有效整数
        if (isNaN(gamesWon) || isNaN(lowestGuesses) || !Number.isInteger(gamesWon) || !Number.isInteger(lowestGuesses)) {
            return fail(400, { invalidNumber: true });
        }

        try {
            await prisma.player.update({
                where: {
                    name: name,
                },
                data: {
                    gamesWon,
                    lowestGuesses,
                },
            });
        } catch (err) {
            // 捕获Prisma操作异常（比如玩家不存在）
            return fail(400, { dbError: true });
        }

        throw redirect(303, `/leaderboard`)
    }
} satisfies Actions;

额外优化建议 #

• 前端提交前先校验wins和leastLettersGuessed是否为有效数字，提前拦截错误
• 可以在后端错误返回中添加具体提示文本（比如missingName: '玩家名称不存在'），方便前端展示友好提示

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