Angular中CSRF Token刚获取即过期引发验证不匹配问题求助

• 检查服务器与客户端时间同步性
  Laravel的令牌过期判定完全基于服务器系统时间，如果客户端（Angular所在浏览器/设备）与Laravel服务器的时间差超过令牌有效期（2小时），就会出现刚获取的令牌被判定为过期的情况。

  • 确认服务器系统时间及时区设置（Laravel配置在config/app.php的timezone项）
  • 检查客户端设备的时间及时区是否与服务器一致

• 验证Laravel Sanctum及CORS配置

  • 打开config/sanctum.php，确认expiration配置值为120（即2小时，默认值），若被错误设置为0或其他极小值会导致令牌立即过期
  • 检查config/cors.php：
    • 确保supports_credentials设为true，否则跨域请求无法携带Cookie
    • allowed_origins需包含Angular应用的完整域名（如http://localhost:4200），避免Cookie被浏览器拦截

• 排查Cookie的存储与传递

  • 在浏览器开发者工具的Application > Cookies面板，查看XSRF-TOKEN和SESSION-TOKEN的Expires/Max-Age是否为获取时间后2小时，同时确认domain、path设置与当前请求域名匹配（可检查Laravel的.env中SESSION_DOMAIN配置，本地开发可设为.localhost）
  • 查看后续请求（/api/login、/api/user）的Request Headers，确认X-XSRF-TOKEN是否存在且值与Cookie中的XSRF-TOKEN一致（注意Cookie中的值是URL编码的，需解码后对比）

• 检查Angular HTTP请求的令牌处理逻辑
  Angular默认会自动读取XSRF-TOKENCookie并添加X-XSRF-TOKEN请求头，但如果有自定义HTTP拦截器，可能覆盖了这一逻辑：

  • 若未配置拦截器，可手动添加拦截器确保令牌正确携带（需先安装ngx-cookie-service）：

    import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { CookieService } from 'ngx-cookie-service';
    
    @Injectable()
    export class CsrfInterceptor implements HttpInterceptor {
      constructor(private cookieService: CookieService) {}
    
      intercept(req: HttpRequest<any>, next: HttpHandler) {
        const xsrfToken = this.cookieService.get('XSRF-TOKEN');
        if (xsrfToken) {
          req = req.clone({
            setHeaders: {
              'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
            }
          });
        }
        return next.handle(req);
      }
    }
    

  • 在app.module.ts的providers数组中注册该拦截器：

    providers: [
      { provide: HTTP_INTERCEPTORS, useClass: CsrfInterceptor, multi: true }
    ]
    

• 查看Laravel日志获取细节
  打开Laravel项目的storage/logs/laravel.log，搜索CSRF token mismatch相关日志，日志中可能包含令牌验证时的时间戳、令牌值等细节，帮助定位具体问题

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