Currently, I am facing an issue with my HTTP POST request from Angular 6. The request is successfully hitting the .net core Web API endpoint, but unfortunately, I am not receiving the expected response back in Angular 6. To make matters worse, when checking the console, I encountered the following error:
"Access to XMLHttpRequest at 'http://localhost:55654/api/login/auth' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Curiously, I find it perplexing that even though there might be a CORS access enabling issue, the API call is still being reached. Despite this, I am unable to receive the desired response.
The code snippet for the Angular 6 HTTP POST request is as follows:
this.http.post("http://localhost:55654/api/login/auth", credentials, {
headers: new HttpHeaders({
"Content-Type": "application/json"
})
}).subscribe(response => {
let token = (<any>response);
localStorage.setItem("jwt", token);
}, err => {
});
I have already implemented CORS configurations within my .NetCore Web API using the methods below:
Configure Method in Startup.cs:
...
app.UseCors(options =>
options.WithOrigins("http://localhost:4200")
.AllowAnyMethod()
.AllowAnyHeader());
...
ConfigureServices Method in Startup.cs:
...
services.AddCors();
...