Laravel v11对接Angular遇CSRF Token不匹配问题求助

核心问题本质 #

Laravel默认对POST/PUT/DELETE等非GET请求强制CSRF验证，你的Angular请求没正确适配Laravel的CSRF Token机制，导致验证失败。

排查及解决步骤 #

1. 先搞懂Laravel 11的CSRF基础逻辑 #

Laravel 11把中间件配置移到了bootstrap/app.php，而非旧版的Kernel.php。首先明确：

• 不要随便全局排除CSRF验证（除非是纯第三方api接口），正确做法是让Angular获取并携带Token。
• 若要临时测试，可在bootstrap/app.php里给注册路由开白名单：

  ->withMiddleware(function (Middleware $middleware) {
      $middleware->validateCsrfTokens(except: [
          '/api/register', // 替换成你的注册接口实际路径
      ]);
  })
  

  注意：这只是临时调试方案，生产环境别这么用。

2. 让Angular正确携带CSRF Token #

Laravel会自动通过Cookie下发XSRF-TOKEN，Angular支持自动读取这个Cookie并在请求头里添加X-XSRF-TOKEN，但需要满足两个条件：

• Angular请求必须开启携带凭据：修改你的请求代码，加上withCredentials: true

  registerUser(userData: any): Observable<any> {
    return this.http.post('http://你的Laravel域名/api/register', userData, {
      withCredentials: true // 这行是关键，确保Cookie能跨域传递
    });
  }
  

• 你的CORS中间件必须允许凭据，且Access-Control-Allow-Origin不能用*（带凭据的请求不支持通配符）：修改自定义CORS中间件

  public function handle(Request $request, Closure $next)
  {
      $response = $next($request);
  
      // 替换成你的Angular实际域名，比如http://localhost:4200
      $response->headers->set('Access-Control-Allow-Origin', 'http://localhost:4200');
      $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
      $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN');
      $response->headers->set('Access-Control-Allow-Credentials', 'true'); // 必须开启这个
  
      return $response;
  }
  

3. 确保Laravel能下发XSRF-TOKEN Cookie #

如果你的注册路由用的是api中间件组，Laravel默认不给api组启用Session，所以不会下发XSRF-TOKEN Cookie。解决方法二选一：

• 把注册路由移到web中间件组下（web组默认带Session和CSRF验证）
• 给api中间件组添加Session中间件：在bootstrap/app.php里修改

  ->withMiddleware(function (Middleware $middleware) {
      $middleware->group('api', [
          \Illuminate\Session\Middleware\StartSession::class, // 新增这行，开启Session
          \Illuminate\Routing\Middleware\SubstituteBindings::class,
          // 你的自定义CORS中间件
      ]);
  })
  

4. 验证请求头是否正确携带Token #

用浏览器F12调试工具查看注册请求的请求头：

• 确认存在X-XSRF-TOKEN字段，且值和Cookie里的XSRF-TOKEN一致（Cookie里的Token是URL编码的，Angular会自动解码）
• 如果Angular没自动生成这个头，可手动获取Cookie并设置：
  先安装ngx-cookie-service库，然后修改代码：

  import { CookieService } from 'ngx-cookie-service';
  
  constructor(private http: HttpClient, private cookieService: CookieService) {}
  
  registerUser(userData: any): Observable<any> {
    const xsrfToken = this.cookieService.get('XSRF-TOKEN');
    const headers = new HttpHeaders().set('X-XSRF-TOKEN', xsrfToken);
    return this.http.post('http://你的Laravel域名/api/register', userData, {
      headers: headers,
      withCredentials: true
    });
  }
  

关键总结 #

1. CORS配置必须允许凭据，且Origin不能用通配符，要指定具体的Angular域名
2. Angular请求必须开启withCredentials: true，确保Cookie能跨域传递
3. 确保Laravel的路由所在中间件组能下发XSRF-TOKEN Cookie

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