Laravel + Vue.js登录时出现419状态码错误求助

419错误是Laravel的CSRF令牌验证失败导致的，以下是针对性的解决步骤：

1. 确认CSRF令牌的正确获取与配置 #

Laravel要求所有POST请求必须携带有效的CSRF令牌，你可以通过两种方式配置：

方式一：通过页面Meta标签获取令牌（适用于Blade渲染的页面） #

在你的主Blade模板（比如app.blade.php）的<head>中添加Meta标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在Vue代码中读取并配置到axios：

// 在你的Vue组件或全局axios配置中
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
axios.defaults.headers.common['X-CSRF-TOKEN'] = csrfToken;

方式二：通过Laravel的/csrf-cookie接口获取令牌 #

如果是单页应用，可先请求该接口让Laravel设置CSRF Cookie，之后axios会自动携带令牌：

// 在你的authStore的getToken方法中实现
async getToken() {
    await axios.get('/csrf-cookie');
    // 若需要手动获取令牌，可从响应或Cookie中提取，不过axios默认会处理
}

同时确保axios开启了withCredentials（同域环境下默认开启，跨域需手动设置）：

axios.defaults.withCredentials = true;

2. 修正你的登录请求代码 #

确保登录请求中携带了CSRF令牌，要么通过请求头，要么作为请求参数：

方案A：通过请求头（推荐） #

如果已经全局配置了axios的X-CSRF-TOKEN头，你的登录请求无需额外修改，只需确保getToken()方法正确完成了令牌的准备工作（比如调用了/csrf-cookie）。

方案B：在请求参数中携带令牌 #

如果你的authStore存储了令牌值，可直接添加到POST参数中：

const submitLogin = async () => {
    await useAuth.getToken();
    await axios.post('/login', {
        email: form.value.email,
        password: form.value.password,
        _token: useAuth.token // 假设authStore的token字段存储了CSRF令牌
    });
    router.push('/');
}

3. 检查VerifyCsrfToken中间件配置 #

确保app/Http/Middleware/VerifyCsrfToken.php中没有错误排除/login路由（默认情况下Laravel的Auth登录路由已处理CSRF，但自定义路由需注意）：

protected $except = [
    // 不要在这里添加'/login'，除非你确定不需要CSRF验证
];

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