生产环境下Vue SPA与Laravel Sanctum的CSRF不匹配问题

问题背景 #

Vue SPA部署在domain.co.uk，Laravel API部署在api.domain.co.uk，POST请求时出现419 CSRF不匹配错误。已确认sanctum/csrf-cookie请求成功，XSRF-TOKEN和laravel_session Cookie已设置，但请求未自动携带X-XSRF-TOKEN请求头；本地环境（localhost端口分离）配置相同可正常运行，手动设置请求头也无效。

解决方案 #

1. 强制配置Axios的XSRF参数

Axios默认会自动从XSRF-TOKEN Cookie提取值并设置X-XSRF-TOKEN请求头，但跨域场景下可能因域名配置失效，需手动指定参数：

axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'https://api.domain.co.uk/';
// 明确指定XSRF的Cookie名称和请求头名称
axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

2. 优化API请求代码（消除冗余嵌套）

原代码存在不必要的Promise嵌套，简化后更易排查问题，同时确保请求前已正确获取CSRF：

export default class Api {
    async getCSRF() {
        await axios.get('sanctum/csrf-cookie');
    }
    
    async login(email, password) {
        await this.getCSRF();
        const response = await axios.post('login', { email, password });
        return response.data;
    }
}

3. 检查Laravel CORS配置

确保config/cors.php配置支持跨域携带凭证：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://domain.co.uk'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    // 必须开启此项，否则跨域请求不会携带Cookie
    'supports_credentials' => true,
];

4. 调整Cookie的SameSite属性

生产环境下，Cookie的SameSite属性若为Strict，会导致子域到主域的跨域请求无法携带Cookie。修改config/session.php：

return [
    // ...其他配置
    'same_site' => 'lax', // 或'none'（仅HTTPS环境可用）
];

若设置为none，必须确保站点使用HTTPS，否则浏览器会拒绝该Cookie。

5. 手动提取Cookie并设置请求头（终极方案）

若Axios自动处理仍失效，可手动从Cookie中提取XSRF-TOKEN并添加到请求头：

// 工具函数：获取指定Cookie的值
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

// 添加请求拦截器，手动设置XSRF头
axios.interceptors.request.use(config => {
    const xsrfToken = getCookie('XSRF-TOKEN');
    if (xsrfToken) {
        config.headers['X-XSRF-TOKEN'] = decodeURIComponent(xsrfToken);
    }
    return config;
});

关键注意点 #

• 建议将SESSION_DOMAIN改为.domain.co.uk（带前缀点），确保子域能共享Cookie：

  SESSION_DOMAIN=.domain.co.uk
  SANCTUM_STATEFUL_DOMAINS=domain.co.uk
  

• 生产环境必须使用HTTPS，否则跨域携带Cookie、SameSite=None等配置都会失效。

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