angular - 正しい構成 Laravel Sanctum と Angular

Question

Sanctum を使用して、角度アプリを Laravel 7 に接続しようとしています。

バックエンドは wamp virtualhost 呼び出し (pruebas.test) で実行されており、構成は次のようになります。

.env:

APP_URL=http://pruebas.test
SESSION_DOMAIN=pruebas.test
SANCTUM_STATEFUL_DOMAINS=localhost:4300

config/cors.php

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

'supports_credentials' => true,

config/session.php (現在、same_site は none に等しいですが、lax、strict、および null オプションで試しました)

'same_site' => "none",

カーネル.php

'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],`

フロントでは Angular 10 を使用し、次のコードでログインするメソッドを実装します。

login(): void {
    const url = `http://pruebas.test/sanctum/csrf-cookie`;
    this.http.get<any>(url).subscribe((res) => {
      console.log(res);

      // the response is correct but not set the cookies
      // this.http.post<any>('http://pruebas.test/api/v1/login', { password: 'password', 'email': 'twatsica@example.com' }).subscribe(success => {
      //   console.log(success);
      //   this.http.get<any>('http://pruebas.test/api/v1/articles').subscribe(success => console.log(success));
      // }
      //   , error => console.log(error))
    })
  }

また、ヘッダー リクエストで withCredentials を追加するインターセプトがあります。

export class AuthInterceptor implements HttpInterceptor {
    headerName = 'X-XSRF-TOKEN';

    constructor(private tokenService: HttpXsrfTokenExtractor) { }

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

        req = req.clone({
            withCredentials: true
        })
        console.log(req);
        req.headers.set('withCredentials', 'true');
        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);
    }
}

しかし、ブラウザーは Cookie を設定しませ'same_site'ん。構成によっては、さまざまな応答がありますが、Cookie は設定されません。

same_site=lax => この Set-Cookie は、"SameSite=lax" 属性を持っていたが、トップレベル ナビゲーションへの応答ではないクロスサイト レスポスネから来たため、ブロックされました。

same_site=strict => この Set-Cookie は、「SameSite=strict」属性を持っていたが、トップレベル ナビゲーションへの応答ではないクロスサイト応答から来たため、ブロックされました。

same_site=none => この Set-Cookie は、"SameSite=none" 属性を持っていたが、"SameSite=none" を使用するために必要な "Secure" 属性を持っていなかったため、ブロックされました。

いくつかのアイデア？