CSRF 令牌与 Laravel SPA 应用程序不匹配答案

【问题标题】：CSRF token mismatch with Laravel SPA ApplicationCSRF 令牌与 Laravel SPA 应用程序不匹配
【发布时间】：2021-01-14 18:29:35
【问题描述】：

我用 Vue 和 Laravel Sanctum 制作了一个 Laravel SPA 应用程序，但是每次我用 axios 发出 POST 请求时，我都会收到 419 错误代码（CSRF 代码不匹配）。

我的 bootstrap.js

window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.withCredentials = true;
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
};

axios.get('/sanctum/csrf-cookie').then(response => {
                    console.log(response);
                    axios.post('/api/auth/login', this.fields).then(response => {
                        this.disabled = false;
                        router.push({ name: 'client.index' });
                    }).catch(error => {
                        this.disabled = false;
                        if(error.response.status === 401) {
                            this.errors.email = 'Your given credentials are incorrect';
                        } else {
                            this.errors.email = (!error.response.data.errors.email) ? '' : error.response.data.errors.email[0];
                            this.errors.password = (!error.response.data.errors.password) ? '' : error.response.data.errors.password[0];
                        }
                    });
                });

我已经在我的脑海中放置了带有 CSRF 代码的元标记。

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

【问题讨论】：

您是否检查过X-CSRF-TOKEN 是否已传递给BE？
查看这个github.com/axios/axios/issues/2024
@vaske 如果我查看“网络”选项卡，我会看到 CSRF 令牌，但仍然是 419 错误代码。 Screenshot
然后我会调试BE端，通常419错误意味着它已过期

标签： javascript laravel vue.js axios

【解决方案1】：

你可以拦截 http 状态 419（Laravel 定义的非标准状态）并重新加载页面以生成新的 CSRF 令牌：

axios.interceptors.response.use(
    response => response.data,
    error => {
        if (error.response && 419 === error.response.status) {
            window.location.reload()
        }

        return Promise.reject(error)
    }
)

【讨论】：