XSRF-TOKEN not added to cookies by Angular (Client side) when .NET core API returns a response with an XSRF-TOKEN

I am using Angular10 and .NET core 2.2. I have configured Startup.cs to return a response with an XSRF-TOKEN. The backend is returning it but Angular doesn’t pass it on to the browser’s cookies.

Reference Microsoft doc https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1#javascript-ajax-and-spas

Server-side code

  // on ConfigureServices
     services.AddAntiforgery(options =>
        {
            options.HeaderName = "X-XSRF-TOKEN";
        });

// on Configure

app.Use(next => context =>
        {
            string path = context.Request.Path.Value;
            if (path != null && path.ToLower().Contains("/api"))
            {
                var tokens = antiforgery.GetAndStoreTokens(context);

                context.Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken,
                new CookieOptions() { HttpOnly = false });
            }

            return next(context);
        });

this._http.get<Array<string>>(`${environment.config.auth.BASE_API_URL}/Product/GetFeature`, { headers, withCredentials: true});