When attempting to retrieve the response header from my post call, I am encountering difficulties as it appears there are "no headers" or I may be doing something incorrectly.
On the backend, I am utilizing ASP.NET Core. Below is a basic outline of my 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 configuration for CORS is as follows:
var AngularApp = "AngularApp";
builder.Services.AddCors(options =>
{
options.AddPolicy(name: AngularApp,
policy =>
{
policy.WithOrigins("http://localhost:4200").AllowCredentials().AllowAnyHeader().AllowAnyMethod();
});
});
app.UseCors(AngularApp);
Within the Angular app, I have the following code snippet:
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 variable res retrieves the response data as {"data": "xyz"}, however, I am unable to access the headers. I specifically need to access the custom header TestCookie and the Set-Cookie within the response.
I have attempted various approaches such as defining
TestAPICall():Observable<HttpResponse<any>>post<Response> to try and access headers with res.headers.get("Set-Cookie"), but it always returns undefined.
It seems contradictory as post returns an Observable<object>.