Laravel 10与NuxtJS集成时Axios请求出现419 CSRF令牌不匹配问题

我在Laravel 10（Docker部署于http://localhost/）与NuxtJS（运行于http://localhost:3000/）的集成环境中，使用Axios发送注册请求时始终返回419状态码，提示CSRF令牌不匹配。但通过@nuxtjs/auth-next实现的登录、获取用户信息及登出功能均能正常运行。已查阅大量资料，尝试修改域名，多次检查配置仍未解决问题。

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: 'lapa@lapa.com',
                password: 'slaptas'
            }
        });

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

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'
        ]
    }
}

问题排查及解决方法 #

1. 手动Axios请求未正确携带CSRF令牌 #

@nuxtjs/auth-next会自动处理CSRF令牌的获取与携带，但手动调用Axios时需手动配置请求头。

修改注册请求代码，先安装@nuxtjs/cookie模块读取cookie：

npm install @nuxtjs/cookie

在Nuxt配置的modules中添加该模块：

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

然后更新注册方法：

async register() {
    await this.$axios.get('/sanctum/csrf-cookie');
    // 从cookie中取出XSRF-TOKEN并设置请求头
    const xsrfToken = this.$cookies.get('XSRF-TOKEN');
    this.$axios.defaults.headers.common['X-XSRF-TOKEN'] = xsrfToken;
    
    await this.$axios.post('/api/register', {
        name: this.name,
        email: this.email,
        password: this.password,
    });
}

2. Axios未配置baseURL导致跨域cookie异常 #

当前Axios仅开启credentials: true，未设置baseURL，手动使用完整URL可能导致cookie域匹配问题。修改Nuxt的Axios配置：

axios: {
    credentials: true,
    baseURL: 'http://localhost' // 与Laravel地址保持一致
}

3. Laravel Sanctum状态域配置补全 #

Docker环境下可能需要扩展状态域列表，确保请求来源被正确识别，修改.env：

SANCTUM_STATEFUL_DOMAINS=localhost,localhost:3000,127.0.0.1,::1

修改后重启Laravel容器使配置生效。

4. Cookie SameSite属性调整 #

Laravel默认SESSION_COOKIE_SAMESITE=lax，跨域场景下可能限制cookie携带，修改.env：

SESSION_COOKIE_SAMESITE=none
SESSION_SECURE_COOKIE=false // 本地开发用false，生产环境需改为true并启用HTTPS

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