Blazor different base path produces error

[roblangston]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When you create a standard Blazor server app via the template, you receive an error if you have changed the base path within the configuration when trying to increment the counter.

Its a similar problem to that mentioned here: https://github.com/dotnet/aspnetcore/issues/54469. This base path behaviour is different between frameworks .Net 8 and .Net 9. In .Net 8, the blazor.web.js attempts to be downloaded from http://localhost:5165/_framework/blazor.web.js even if a different base path "blazor" has been set. In .Net 9, the file is downloaded from http://localhost:5165/blazor/_framework/blazor.web.js correctly but a different error is received when trying to interact with page components (see error).

The following lines have been changed in the program.cs:-

app.UsePathBase("/blazor/"); app.MapBlazorHub("/blazor"); app.UseStaticFiles("/blazor");

In App.razor, the base has been changed as follows:-

<base href="/blazor/" />

The various page routes have been prefixed to match the base path as follows:-

@page "/blazor/counter"

The reason for wanting this to work correctly is to be able to front multiple sites behind a reverse proxy, either Yarp or NginX and that behavior doesnt seem to work without the sites being deployed with a different base path.

Expected Behavior

Page functions correctly when having base path changed.

Steps To Reproduce

Create a new Blazor web project from within VS2022 Preview, make changes to the code as detailed above in the description.

GitHub repo here:-
https://github.com/roblangston/BlazorTest

Exceptions (if any)

blazor.web.js:1 [2024-09-12T18:09:34.506Z] Information: Normalizing '_blazor' to 'http://localhost:5165/blazor/_blazor'.
_blazor/negotiate?negotiateVersion=1:1

   Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

blazor.web.js:1 [2024-09-12T18:09:34.509Z] Error: Failed to complete negotiation with the server: Error: Method Not Allowed: Status code '405'
log @ blazor.web.js:1
blazor.web.js:1 [2024-09-12T18:09:34.510Z] Error: Failed to start the connection: Error: Failed to complete negotiation with the server: Error: Method Not Allowed: Status code '405'
log @ blazor.web.js:1
blazor.web.js:1 [2024-09-12T18:09:34.510Z] Error: Error: Failed to complete negotiation with the server: Error: Method Not Allowed: Status code '405'
log @ blazor.web.js:1
blazor.web.js:1 Uncaught (in promise) zt: Failed to complete negotiation with the server: Error: Method Not Allowed: Status code '405'
at Dn._getNegotiationResponse (http://localhost:5165/blazor/_framework/blazor.web.js:1:87758)
at async Dn._startInternal (http://localhost:5165/blazor/_framework/blazor.web.js:1:85614)
at async Dn.start (http://localhost:5165/blazor/_framework/blazor.web.js:1:83488)
at async wn._startInternal (http://localhost:5165/blazor/_framework/blazor.web.js:1:58614)
at async wn._startWithStateTransitions (http://localhost:5165/blazor/_framework/blazor.web.js:1:58028)
at async Bo.startConnection (http://localhost:5165/blazor/_framework/blazor.web.js:1:136200)
at async Bo.startCore (http://localhost:5165/blazor/_framework/blazor.web.js:1:134228)
at async Zo (http://localhost:5165/blazor/_framework/blazor.web.js:1:153050)

.NET Version

9.0.100-rc.1.24452.12

Anything else?

[javiercn]

@roblangston thanks for contacting us.

I've tracked this down to some development specific functionality being wired-up when the container is running. This fix #57671 we did recently should take care of ensuring that functionality is not enabled in this scenario.

It was backported to RC2 a few days ago #57764

In the meantime, you can use "ReloadStaticAssetsAtRuntime": false to disable the problematic behavior in your appSettings.Development.json file.

[javiercn]

Here is also a dockerfile if you want to run against RC2

ARG IMAGE_VERSION=9.0-preview
FROM mcr.microsoft.com/dotnet/sdk:${IMAGE_VERSION} AS install-nightly
ARG DOTNET_CHANNEL=9.0.1.xx
ARG DOTNET_NIGHTLY_VERSION=9.0.100-rc.2.24463.6
ARG DOTNET_INSTALL_DIR=/.dotnet
RUN mkdir -p $DOTNET_INSTALL_DIR
RUN command curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --channel $DOTNET_CHANNEL --install-dir $DOTNET_INSTALL_DIR ${DOTNET_NIGHTLY_VERSION:+--version $DOTNET_NIGHTLY_VERSION}
RUN mkdir -p /src
WORKDIR /src

FROM install-nightly AS workspace
ENV DOTNET_ROOT=$DOTNET_INSTALL_DIR
ENV PATH=${DOTNET_INSTALL_DIR}:$PATH

FROM workspace AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
RUN dotnet new nugetconfig
RUN dotnet nuget add source https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet9/nuget/v3/index.json -n dotnet9 --configfile /src/nuget.config
RUN cat /src/nuget.config
COPY ["BlazorTest/BlazorTest.csproj", "BlazorTest/"]
RUN dotnet restore "./BlazorTest/BlazorTest.csproj"
COPY . .
WORKDIR "/src/BlazorTest"
RUN dotnet build "./BlazorTest.csproj" -c $BUILD_CONFIGURATION -o /app/build

# This stage is used to publish the service project to be copied to the final stage
FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./BlazorTest.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

# This stage is used in production or when running from VS in regular mode (Default when not using the Debug configuration)
FROM workspace AS final
WORKDIR /src
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "BlazorTest.dll"]

[javiercn]

Just validated myself that this is fixed in RC2.

[javiercn]

Closing as dupe of https://github.com/dotnet/AspNetCore-ManualTests/issues/3007

[roblangston]

Closing as dupe of https://github.com/dotnet/AspNetCore-ManualTests/issues/3007

Is the issue referenced above internal, I get a 404 when trying to visit the link.

[AlexHallParcVu]

I was still getting this issue with .net 9 upgrade and running the blazor app through Aspire. Once I added ReloadStaticAssetsAtRuntime: false I did not get the 405 anymore.

This was happening in a private repo. I have tried to reproduce using a public one but I cannot. When I run the Blazor app without using Aspire it works fine.

Any idea on the possible causes of this?

[softlion]

UPDATE: found a solution

Setting both

    <base href="/test/">

and

    app.UsePathBase("/test");
    app.MapBlazorHub("/test/_blazor");
    app.UseStaticFiles("/test");

fixed it.
What completely fixed it is app.MapBlazorHub("/test/_blazor");

Scenario and Explanations:

• the app is deployed behind nginx on k8s
• nginx only redirects urls starting with /test/ to the app
• the app is built to use /test/ on localhost too

<base href="/test/">
That forces all links in the html generated by blazor to use the /test/ prefix, for fetching both static data and api endpoints.
For ex the content of the wwwroot folder is static data, but /test/_blazor is a (hidden) endpoint for the signalr websocket.

app.UsePathBase("/test");
That strips "/test" from the url for routing.
With that you use the @page "/my-page" directive in your blazor pages instead of "/test/my-page"

app.MapBlazorHub("/test/_blazor");
That forces the signalr endpoint to listen on the /test/ prefix.
For some reason it ignores UsePathBase.
That's the main difference between the legacy 'blazor server' and the current 'blazor web app'.

app.UseStaticFiles("/test");
I'm not sure of that one.
But if MapBlazorHub ignores UsePathBase, why UseStaticFiles won't ignore it too ?

ORIGNAL

I am also still getting that too.
I followed the official doc which suggests to set either UsePathBase() or <base href="/">.

Results

1. Setting only <base href="/test/">

https://localhost:5000/test/mypage
=> 404

https://localhost:5000/mypage
=> 200, but all assets gets 404
GET https://localhost:5001/test/_framework/blazor.web.js net::ERR_ABORTED 404 (Not Found)

That does not work either when deployed on the server, as nginx is only configured to map /test/ to a specific port where the app runs. The app receives /test/xxx urls, not / urls.

2. Setting only app.UsePathBase("/test")

https://localhost:5000/test/mypage
=> 200 all OK

https://localhost:5000/mypage
=> 200 all OK too

But when deployed to nginx
https://mydomain.com/test/mypage
=> 200 OK except 404 on all assets (css, js ...),
which is explained by the use of https://mydomain.com/ as the base path for those assets instead of https://mydomain.com/test/

3. Setting both app.UsePathBase("/test") and <base href="/test/">

https://localhost:5000/test/mypage
=> 200
but POST https://localhost:5001/test/_blazor/negotiate?negotiateVersion=1 405 (Method Not Allowed)

https://localhost:5001/order-license
=> 200
and POST https://localhost:5001/test/_blazor/negotiate?negotiateVersion=1 405 (Method Not Allowed)

That used to be the correct configuration when using the legacy blazor server js script.
But the updated microsoft doc explicitly tells to use either UsePathBase or base href, not both at the same time.

Context

I migrated from blazor server to blazor web (still server) with the minimal startup model.
That's where it started happening.