CSRF 令牌不匹配 Laravel 10 和 NuxtJS

Question

我的设置的主要问题是我无法使用 axios 发出请求。总是因为 CSRF 令牌不匹配而得到 419，不知道该怎么办，查看了谷歌上的每篇文章，使用 axios 的示例请求：

methods: {
    async register() {
        await this.$axios.get('http://localhost:80/sanctum/csrf-cookie');
        await this.$axios.post('http://localhost:80/api/register', {
            name: this.name,
            email: this.email,
            password: this.password,
        });
    }
}

奇怪的是我可以正常登录、接收用户和注销。像这样：

methods: {
    async logout() {
        await this.$auth.logout()

        await this.$router.push('/login')
    },
},

methods: {
    async login() {
        await this.$auth.loginWith('laravelSanctum', {
            data: {
                email: '[email protected]',
                password: 'slaptas'
            }
        });

        await this.$router.push('/');
    }
}

我确实尝试更改域，检查了我的设置几次，一切看起来都很正常。

我的 laravel 后端在 http://localhost/ 的 docker 上运行 我的 nuxt 应用程序运行在 http://localhost:3000/

laravel 配置：

SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=localhost
SESSION_DRIVER=cookie
APP_URL=http://localhost

NuxtJS 配置：

export default {
    head: {
        title: 'appname',
        htmlAttrs: {
            lang: 'en'
        },
        meta: [{
                charset: 'utf-8'
            },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            },
            {
                hid: 'description',
                name: 'description',
                content: ''
            },
            {
                name: 'format-detection',
                content: 'telephone=no'
            }
        ],
        link: [{
            rel: 'icon',
            type: 'image/x-icon',
            href: '/favicon.ico'
        }]
    },

    css: [],

    plugins: [],

    components: true,

    buildModules: [
        '@nuxt/typescript-build',
        '@nuxt/postcss8'
    ],

    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/auth-next'
    ],

    axios: {
        credentials: true
    },

    auth: {
        strategies: {
            'laravelSanctum': {
                provider: 'laravel/sanctum',
                url: 'http://localhost',
                endpoints: {
                    login: {
                        url: '/api/login'
                    },
                    logout: {
                        url: '/api/logout'
                    }
                }
            }
        }
    },

    build: {
        transpile: [
            'defu'
        ]
    }
}

我做错了什么？

Answer 1

所以当你将 laravel 与 sanctum 一起使用时，你需要首先获取 CSRF 令牌，我看到你正在这样做。 Axios 应该代表您附加它，但您可能还需要设置它。由于您能够登录然后失败，我想知道它是否在请求之间丢失了。你应该检查它是否在后续请求中。

https://laravel.com/docs/10.x/sanctum#csrf-protection