CSRF 令牌与 Laravel sainttum 和 Angular http 不匹配

Question

我一直在尝试实现 Laravel Sanctum，但即使我遵循了 Laravel Sanctum 文档中所述的所有内容，我也遇到了“CSRF 令牌不匹配”错误

cors.php配置文件

'paths' => [
    'api/*',
    'login',
    'logout',
    'sanctum/csrf-cookie'
],
'supports_credentials' => true,

kernal 是根据文档添加的，因此在此处添加其代码不会浪费空间

.env文件

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

我在这里使用 Angular 9 作为我的前端

这是我的拦截器

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost

这就是我向 Laravel 发送请求的方式

request = request.clone({
    withCredentials: true
})

一旦命中第一条路线，我就可以确认 cookie 的创建，但问题出在第二条路线（'/login'）

Answer 1

我能够通过在之前添加来解决这个http://问题localhostconfig/sanctum.php

由此

'stateful' => explode(',', env(
        'SANCTUM_STATEFUL_DOMAINS',
        'localhost,127.0.0.1'
)),

对此

'stateful' => explode(',', env(
            'SANCTUM_STATEFUL_DOMAINS',
            'http://localhost,127.0.0.1'
    )),

Answer 2

您需要在标头中发送x-csrf-token （Angular 仅在相对 URL 而非绝对 URL 中自动包含它）

您可以创建一个解释器来执行此操作，如下所示应该可以工作：

import {Injectable} from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpXsrfTokenExtractor
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class HttpXsrfInterceptor implements HttpInterceptor {
  headerName = 'X-XSRF-TOKEN';

  constructor(private tokenService: HttpXsrfTokenExtractor) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    if (req.method === 'GET' || req.method === 'HEAD') {
      return next.handle(req);
    }

    const token = this.tokenService.getToken();

    // Be careful not to overwrite an existing header of the same name.
    if (token !== null && !req.headers.has(this.headerName)) {
      req = req.clone({headers: req.headers.set(this.headerName, token)});
    }
    return next.handle(req);
  }
}