I have an application running on .NET Core 3.1 on the back-end and Angular/Angular Materials 12 on the front-end and an OKTA Authentication integration with Angular/.NET Core.
Since I updated the angular code from Angular 9 to 12 and implemented Okta, my API calls are suddenly not reaching the actual API method in the .NET Core API controller.
My solution is structured with a web application and API project. All API controllers live in the API project. In an attempt to figure out why the function in angular is not hitting the API endpoint, I've included console.log statements at the TS level and the service level.
I've verified the API method and path work when hitting it directly from a browser and when using an API inspector like PostMan. I'm venturing a guess that its possibly CORS related, but not completely sure.
UserManagementComponent.ts function:
TestAPI() {
console.log("Inside Test API function. Next Step is to call the service for getting users tasks");
this.userManagementService.GetUserTasks();
}//End Test API
User Management Service:
GetUserTasks(): Observable<Tasks[]> {
console.log("Made it to the GetUserTasks function inside service. ");
let methodName = "getUserTasks";
let attempts: any;
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
};
return this.http.get<Tasks[]>(this.url + '/' + methodName, httpOptions).pipe(
tap((UserTasksResponse: Tasks[]) => alert('resulting response data is: ' + JSON.stringify(UserTasksResponse))),
catchError((httpError: HttpErrorResponse) => {
console.log("Error Status code is: " + httpError.status + " and http error is: " + httpError.statusText);
console.log(this.handleError(httpError, methodName));
return this.handleError(httpError, methodName);
}),
//Eventually add in an attempts counter.
retryWhen(errors => errors.pipe(delay(750), take(4)))
);
}
API Method
[HttpGet]
[Route("/api/UserManagement/getUserTasks")]
public IActionResult GetUserManagementTasks()
{
// 1. Get the user's Id
var currentUser = new Guid("831AA34E-C96C-4C0D-DC89-08D7CDE02943");
// 2.Get the tasks assigned to the user. If the user id is an account owner id, get all tasks.
Data.Repositories.IUserRepository repo = new Data.Repositories.IUserRepository();
List<Tasks> userManagementTasks = repo.GetUserManagementTasks(currentUser);
// 3. Return all tasks to the UI.
return Ok(userManagementTasks);
}
Web project Startup.cs:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseHttpsRedirection();
app.UseRouting();
app.UseDeveloperExceptionPage();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
//else
//{
// app.UseExceptionHandler("/Home/Error");
// // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
// app.UseHsts();
//}
} //End if env.IsDevelopment
}
API project Startup.cs:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseCors(x => x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseHttpsRedirection();
app.UseRouting();
app.UseDeveloperExceptionPage();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
}
else { }
}
