Menu
I have a Blazor WebAssembly project in Visual Studio. I have now just added an Azure Function project to the solution. I intend to publish this to the new Azure Static Web App.
I have been following the instructions in this Microsoft documentation.
Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps
According to the documentation I just need to set up CORS locally using launchSettings.json and then run both the Api and the Client projects at the same time in Visual Studio. I should then be able to make calls to the Api like this for example.
string test = await Http.GetStringAsync("api/Test");
Upon testing this, the string variable "test" just returns the following.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Client</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="Client.styles.css" rel="stylesheet" /> <link href="manifest.json" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> </head> <body> <div id="app">Loading...</div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> </body> </html>
This appears to just be the HTML of the same page, but with the, "An unhandled error has occurred." message that you would normally see along the bottom of the page along with the Reload link. However that is not happening, I'm just getting the HTML for it instead. So clearly something is going wrong and the error isn't being displayed.
In addition, inspecting the browser console log shows no errors, which is very strange. Normally when receiving an error like this, there is something in the browser log.
If I change the Api call in the code to the following, then it works fine.
string test = await Http.GetStringAsync("http://localhost:7071/api/Test");
Obviously I can't keep it like that because I would have to change every call back before publishing to the live site. However, this shows that it is working, the client just can't see the api when using just "api/Test" for some reason.
I can't see anything else in the documentation that I'm missing. Why does the documentation say it should work when it isn't for me? What could I be missing?
880
asked Oct 29 '25 08:10
So after closely comparing my code to the code in the github repository used by the Microsoft documentation I discovered they have a file called appsettings.Development.json in the Client/wwwroot folder, which is used to provide a URL prefix to the Client app so it can access the Api project locally:
{
"API_Prefix": "http://localhost:7071"
}
This prefix is then prepended to the BaseAddress in Program.cs:
builder.Services.AddScoped(sp =>
new HttpClient { BaseAddress = new Uri(builder.Configuration["API_Prefix"] ?? builder.HostEnvironment.BaseAddress) });
The frustrating part is that the documentation completely omits this and provides no indication that this is a necessary step.
I'm posting this here in case anyone else comes across the same problem.
163
answered Oct 31 '25 07:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With