Correct configuration Laravel Sanctum and Angular

I'm trying to connect my angular-app to my Laravel 7 using Sanctum.

The backend is running in a wamp virtualhost calls (pruebas.test) and the config is like that:

.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 (now is same_site equals none but I tried with lax, strict and null options)

'same_site' => "none",

kernel.php

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

At the front we work with Angular 10 and we implement a method to login with this code:

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': '[email protected]' }).subscribe(success => {
      //   console.log(success);
      //   this.http.get<any>('http://pruebas.test/api/v1/articles').subscribe(success => console.log(success));
      // }
      //   , error => console.log(error))
    })
  }

Also we have and interception to add withCredentials at the header request:

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);
    }
}

But the browers never set the cookies, dependes the 'same_site' configuration we have differents reponses but the cookie never set.

same_site=lax => This Set-Cookie was blocked because it had the "SameSite=lax" attribute but came form a cross-site resposne which was not the response to a top-level navigation.

same_site=strict => This Set-Cookie was blocked because it had the "SameSite=strict" attribute but came form a cross-site resposne which was not the response to a top-level navigation.

same_site=none => This Set-Cookie was blocked because it had the "SameSite=none" attribute but did not have the "Secure" attribute, which is required in order to use "SameSite=none"

Some ideas?