CSRF 与生产中的 Vue SPA 和 Laravel sainttum 不匹配

Question

我有一个在domain.co.uk上运行的vue SPA和一个在api.domain.co.uk上运行的laravel api。

当我发出 post 请求时，我收到 CSRF 不匹配错误 (419)，因为它不是在标头中发送，而是作为 cookie 发送。

这是发送post请求的代码，使用axios

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://api.domain.co.uk/';

export default class Api {
    constructor() {}

    async getCSRF() {
        return new Promise(async ( resolve, reject ) => {
            await axios.get( 'sanctum/csrf-cookie' )
            .then(( response ) => {
                resolve();
            }) 
            .catch(( error ) => {
                reject( error );
            })
        })
    }
    
    async login( email, password ) {
        return new Promise(async ( resolve, reject ) => {
            await axios.get( 'sanctum/csrf-cookie' ).then(( cookie ) => {
                await axios.post( 'login', { email: email, password: password } )
                .then(( response ) => {
                    resolve( response.data );
                })
                .catch(( error ) => {
                    reject( error.response.data );
                })
            })
            
        })
    }
}

我已经在服务器上设置了会话域和状态域。环境是

APP_URL=https://api.domain.co.uk
FRONTEND_URL=https://domain.co.uk
SESSION_DOMAIN=domain.co.uk
SANCTUM_STATEFUL_DOMAINS=domain.co.uk

getCSRF 请求成功，XSRF-TOKEN 和 laravel_session cookie 已设置。但在请求中，未发送 X-SRF-TOKEN 标头。

它可以在本地使用相同的设置，SPA 在 localhost:5173 上运行，api 在 localhost:8000 上运行。

额外 - 即使我手动设置标题，我仍然会出现不匹配的情况

Answer 1

将您的 .env 配置更新为：

APP_URL=https://api.domain.co.uk
FRONTEND_URL=https://domain.co.uk
SESSION_DOMAIN=.domain.co.uk
SANCTUM_STATEFUL_DOMAINS=domain.co.uk,api.domain.co.uk