Blazor WASM & Azure Static Web Apps, routes not working

Question

I have a blazor WASM static web app, the "/api/" & "/.auth/" urls that should be handled on the server side by Azure seem to get pick up by the blazor WASM routing.

the "sorry, theirs nothing..." here is coming from App.razor:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <p>Loading session state...</p>
                </Authorizing>
                <NotAuthorized>
                    <h1>Sorry</h1>
                    <p role="alert">You are not authorized to access this resource.</p>
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

for example if enter https://xxxxx/.auth/me in the browser I get the following:

But if I CTRL+F5 refresh then I can get the expected response:

I've tried the following without any luck in the staticwebapp.config.json:

  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": [ "/api/*", "/.auth/*" ]
  },

The exact same thing happens with the api paths, if go to the following url, i get "Sorry, there's nothing at this address." if I CRTL+F5 I get the response from the function, if I then click the browsers refresh button back to "Sorry, there's nothing at this address.", only way to get correct response if via CTRL+F5

Answer 1

that is correct. The Blazor WASM (or Server) will intercept browser navigation and use it as Blazor routing. In Blazor to navigate to an external URL, you use jsinterop and navigate via window.location.

the azure functions are expected to be called via HttpClient. But if typed into a browser window not running Blazor, the server will handle (this is what f5 does - it unload Blazor and requests the /api url directly).

Answer 2

This error came down to a invalid appsettings.json file, not that it stopped anything else from working that I noticed. Json doesn't support comments, hence file below was invalid.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
  //"AzureAd": {
  //  "ClientId": "XXXXXXX-b093-4ddf-8b3d-6f653ccc1dc7",
  //  "Authority": "https://comusers.ciamlogin.com/comusers.onmicrosoft.com",
  //  //"Authority": "https://login.microsoftonline.com/XXXXXXXXX-e6a1-4f1b-baeb-604c7b67d2f2",
  //  "ValidateAuthority": true
  //}
}