Svelte通过Fetch POST请求Laravel API出现500内部服务器错误求助

我正在开发一款打字测试游戏，游戏结束计算出WPM（每分钟打字字数）后，需要将WPM数据提交到Laravel搭建的REST API服务器存入数据库，用于后续排行榜功能。但调用Svelte中的fetch方法发送POST请求时，出现500内部服务器错误，无法提交数据；使用Postman测试相同接口却能正常运行，修改fetch代码也无效果，特此求助解决。

相关代码 #

Svelte中的fetch提交方法 #

async function sendWPMToServer(wpm) {
        try {

            const currentUser = $authenticatedUser;
            if (!currentUser) {
                console.error("User is not authenticated");
                return;
            }

            const response = await fetch("http://127.0.0.1:8000/api/scores", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                credentials: "include",
                body: JSON.stringify({
                    user_id: currentUser.id,
                    wpm_score: wpm,
                }), 
            });
        } catch (error) {
            console.log("Error");
        }
    }

Laravel路由配置（api.php） #

Route::post('register', [AuthController::class, 'register']);
Route::post('login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function() {
    Route::get('user', [AuthController::class, 'user']);
    Route::post('logout', [AuthController::class, 'logout']);
    Route::post('scores', [ScoresController::class, store]);
});

Laravel分数控制器（ScoreController.php） #

public function store(Request $request)
    {
        $userId = $request->input('user_id');
        $wpmScore = $request->input('wpm_score');

        UserScore::create([
            'user_id' => $userId,
            'wpm_score' => $wpmScore,
        ]);

        return response()->json(['message' => 'Score stored successfully'], 201);
    }

Postman导出的请求代码 #

myHeaders.append("Content-Type", "application/json");
myHeaders.append("Cookie", "jwt=1%7CEHYsf3eIO3X82iyeDwJunfnXcR2E1x1eQNPgkbFH078daa05");

var raw = JSON.stringify({
  "user_id": 1,
  "wpm_score": 60
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch("http://127.0.0.1:8000/api/scores", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

排查与解决步骤 #

1. 修复路由语法错误 #

Laravel路由中调用控制器方法时缺少引号，这是直接导致500错误的原因：

// 错误写法
Route::post('scores', [ScoresController::class, store]);

// 正确写法
Route::post('scores', [ScoresController::class, 'store']);

2. 完善fetch的错误处理逻辑 #

原代码仅捕获网络错误，未处理服务器返回的错误响应，添加状态检查以便定位问题：

async function sendWPMToServer(wpm) {
    try {
        const currentUser = $authenticatedUser;
        if (!currentUser) {
            console.error("用户未认证");
            return;
        }

        const response = await fetch("http://127.0.0.1:8000/api/scores", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            credentials: "include",
            body: JSON.stringify({
                user_id: currentUser.id,
                wpm_score: wpm,
            }), 
        });

        // 新增：检查响应状态并输出错误详情
        if (!response.ok) {
            const errorInfo = await response.json();
            console.error("服务器返回错误:", errorInfo);
            throw new Error(`请求失败，状态码：${response.status}`);
        }

        const successData = await response.json();
        console.log("分数提交成功:", successData);
    } catch (error) {
        console.error("提交失败:", error.message);
    }
}

3. 配置Laravel的CORS允许凭据传递 #

由于使用了credentials: "include"，需要确保Laravel的CORS配置允许携带凭据：
修改config/cors.php：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:5173'], // 替换为你的前端地址
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true, // 开启这一项
];

4. 给控制器添加数据验证 #

避免非法数据导致数据库报错，在store方法中添加验证规则：

public function store(Request $request)
{
    $validatedData = $request->validate([
        'user_id' => 'required|exists:users,id',
        'wpm_score' => 'required|integer|min:0',
    ]);

    UserScore::create($validatedData);

    return response()->json(['message' => '分数保存成功'], 201);
}

5. 查看Laravel日志定位深层问题 #

如果以上步骤仍未解决，直接查看Laravel的日志文件storage/logs/laravel.log，里面会记录500错误的详细堆栈信息，是排查服务器端问题最直接的方式。

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