I am trying to access the response header from the post call but it seems there are “no headers” or I am going it wrong.

In the back end I am using ASP.NET Core. Here is my basic API:

[HttpPost("myTestApi")]
public async Task<IActionResult> TestAPi([FromBody] TestApiRequestModel requestBody)
{
    await Task.Delay(0);
    Response.Headers.Append("X-Test-Header", "Test Header");
    Response.Cookies.Append("TestCookie", Guid.NewGuid().ToString());
    return StatusCode(200, new { data = requestBody.Input });
}

The CORS configuration is:

var AngularApp = "AngularApp";
builder.Services.AddCors(options =>
{
    options.AddPolicy(name: AngularApp,
    policy =>
    {
        policy.WithOrigins("http://localhost:4200").AllowCredentials().AllowAnyHeader().AllowAnyMethod();
    });
});

app.UseCors(AngularApp);

In the angular app I have the bellow code:

public TestAPICall()
{
return this.http.post("https://localhost:7227/api/myTestApi", {input: "xyz"})
.subscribe(
      res => {
        console.log(res);
        console.log(res.headers.get('Set-Cookie'));
      });
}

The res returns the response data {"data": "xyz"} but I could not find a way to access the headers. I want to access the custom header TestCookie and the Set-Cookie coming with the response.

I have tried a few things such as TestAPICall():Observable<HttpResponse<any>> and post<Response> then try to access headers: res.headers.get("Set-Cookie") but it is undefined.
I guess it make no sense as post returns a Observable<object>.