Angular + WebApi project on Azure App Service got 401

Question

The project runs Ok locally with Angular 14 + .Net 6 WebApi.

After deploying both onto respective Azure App Service, it gets 401 when Angular calls backend Api which has Authorize[role].

Found a difference which the angular webapp deployed on Azure App Service has no Authorization(with jwt token) in the request header. Not sure if this is the root cause.

The header from local running when triggering the call was as below.

And the one deployed on Azure App Service as below.

Any help or advice would be greatly appreciated.

Answer 1

The authorization header is what is injected when you have successfully authenticated. How does your app get the authentication token when it runs? You either have hard coded credentials in your code to talk to the back end API or you are prompting the user for credentials and then authenticating from there. Whatever that step is isn't happening.

One thing that I would start to suspect is that your environment settings aren't properly configured. When you deploy your app to Azure you should have set up the environment under your app service's settings. The ASP.NET environment determines what appsettings.json file to read. By default it would read appsettings.json + appsettings.<environment>.json. You should confirm that your app service is using the appropriate environment and that your JSON files have been properly copied to the server and that they are configured for authentication properly. My gut instinct is that your using the wrong credentials so authentication is failing.

Answer 2

check your angular code that sets the header. It is failing to set a header.

Answer 3

Thanks for the replys, guys. @Michael Taylor @Bruce (SqlWork.com)

I am using the basic authentication through

var tokenString = new JwtSecurityTokenHandler().WriteToken(tokeOptions);

after checking user login credentials.
The token generation is fine and the client could receive it and then store it in localStorage and decode the token whenever needs it.

I digged a little bit deeper and did some more tests by pointing local Angular UI to Azure App Service WebApi backend which is deployed already. Test Result is Positive. All good for authentication and authorization. No 401 thrown from backend and observed from front-end. And I can see the Authorization header in the request.

And I also printed out Environemnt settings in Angular Client UI Project onto a new Page (Created a new page for this test purpose). Test Result: Positive. It did take the environment.production.ts after deployed to anther Web App.

I think the problem is at the Front end. I do not have code for injecting Authorization header to http requests. Most of my request are following the below format.

getReports(): Observable<SummaryModel[]>{
return this.http.get<SummaryModel[]>(this.baseApiUrl + '/api/Records/user/report');
}

There is no code specifically setting the headers (No authorization header setting code). How can I debug the header setting from client?
And what makes this header difference between running locally and deployed onto Azure web app with same code ?

Thanks.