Laravel Breeze登录Fetch请求异常求助：JSON解析失败

核心问题 #

你的请求存在两个关键问题：

1. FormData未正确填充：控制台显示FormData {}，说明前端没有把表单数据正确存入FormData对象。
2. 后端返回HTML而非JSON：报错提示拿到的是HTML内容，因为Laravel Breeze登录接口验证失败时，默认返回带错误信息的登录页面（HTML），而非你期望的JSON响应。

具体修复步骤 #

1. 确保FormData正确收集表单数据 #

检查前端Fetch代码，保证正确获取表单字段值并添加到FormData中：

const form = document.getElementById('login-form');
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    // 打印验证FormData是否有值，正常应显示邮箱、密码等键值对
    console.log([...formData.entries()]);

    try {
        const response = await fetch('/login', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                // 注意：不要手动设置Content-Type为application/json，FormData会自动处理为multipart/form-data
            },
            body: formData
        });

        if (!response.ok) {
            // 后端返回HTML时，提取页面中的错误提示
            const html = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');
            const errorElements = doc.querySelectorAll('.invalid-feedback');
            const errorList = [];
            errorElements.forEach(el => errorList.push(el.textContent.trim()));
            
            // 显示错误到页面提示区域
            const errorContainer = document.getElementById('error-container');
            errorContainer.innerHTML = errorList.join('<br>');
            errorContainer.style.display = 'block';
            return;
        }

        // 登录成功后跳转首页
        window.location.href = '/dashboard';
    } catch (error) {
        console.error('Error during login:', error);
    }
});

2. 修改Laravel后端，让登录接口返回JSON响应 #

如果希望后端直接返回JSON错误，修改LoginController的authenticate方法（路径：app/Http/Controllers/Auth/LoginController.php）：

use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;

protected function authenticate(Request $request)
{
    if (! $this->attemptLogin($request)) {
        // 让错误返回JSON格式
        throw ValidationException::withMessages([
            $this->username() => [trans('auth.failed')],
        ])->response()->json();
    }

    $request->session()->regenerate();

    // 登录成功也返回JSON
    return response()->json(['redirect' => route('dashboard')]);
}

修改后，前端可直接解析JSON响应：

// 替换之前的错误处理部分
const data = await response.json();
if (data.errors) {
    const errorContainer = document.getElementById('error-container');
    errorContainer.innerHTML = Object.values(data.errors).flat().join('<br>');
    errorContainer.style.display = 'block';
} else if (data.redirect) {
    window.location.href = data.redirect;
}

3. 常见排查点 #

• 确认表单字段的name属性正确，比如邮箱字段name="email"、密码字段name="password"，否则FormData无法收集到值。
• 确保页面存在meta[name="csrf-token"]标签，否则POST请求会被Laravel的CSRF保护拦截。
• 若使用自定义登录路由，确认路由指向正确的控制器方法。

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