I was building a Blazor webassembly app wherein I call a webapi using Microsoft Identity (msal). When running my application (and webapi) in a localhost testenvironment, everything worked just fine. But as soon as I called the webapi from the deployed site, I got the following error message:
TypeError: Failed to fetch at System.Net.Http.BrowserHttpHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at Microsoft.Extensions.Http.Logging.LoggingHttpMessageHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at Microsoft.AspNetCore.Components.WebAssembly.Authentication.AuthorizationMessageHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at Microsoft.Extensions.Http.Logging.LoggingScopeHttpMessageHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Net.Http.HttpClient.SendAsyncCore(HttpRequestMessage request, HttpCompletionOption completionOption, Boolean async, Boolean emitTelemetryStartStop, CancellationToken cancellationToken) at System.Net.Http.Json.HttpClientJsonExtensions.d__9`1[[AgroIT.POC.Scanner.Models.PartModel, AgroIT.POC.Scanner.Blazor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
In my code I had the following definition setup within the Program.cs of the Blazor app:
builder.Services.AddHttpClient("MyAPI",
client => {
client.BaseAddress = new Uri(baseAddress);
})
.AddHttpMessageHandler<CustomAuthorizationMessageHandler>();
baseAddress was filled with "https://localhost:5001" for my localhost test; and filled with "https://www.somewebsiteiused.eu/api" for the deployed site.
Using Fiddler I found out that the request made to the deployed site did not include api within the URL.
The solution: always add a slash to the end of your baseAddress. Because as soon as I changed the baseAddress to the deployed site in https://www.somewebsiteiused.eu/api/ (with a slash at the end). It worked!
