Unable to load a Blazor webassembly application when published on IIS

Question

On the development laptop using a local IIS with Visual Studio everything works fine. On the server where I published the application through Azure Devops the Blazor app fails to load with this javascript error

System.ArgumentException: The URI 'http://10.144.2.7/SincroADR_Api/' is not contained by the base URI 'http://10.144.2.7/SincroADR_API/'.

On the index.html of the Blazor Client App I have this base url

<base href="/SincroADR_API/" />

SincroADR_API is a .Net Core 3.1 Web Api project, IIS server is version 7.5 (Win 2k8 R2), IIS local is 10 (Win 10).

All the Blazor files (js, webassembly) are downloaded correctly on the browser, but I can't understand why in a local IIS it works. Any ideas ?

Answer 1

The href attribute in the base tag must match the corresponding part of the URL of the request, including the case of symbols. If you look at the error message, the "_Api" part of the requested URL does not match the "_API" part of the base href.

This is very inconvenient bug. You can work around it by modifying your base href to match the URL that was used to navigate to your app.

In the wwwroot/index.html file place the following script before blazor webassembly include:

<script>
    let baseTag = document.getElementsByTagName('base')[0];
    let baseHref = baseTag.getAttribute('href');
    let href = window.location.pathname.substr(0, baseHref.length)
    if (!href.endsWith('/')) href += '/';
    baseTag.setAttribute('href', href);
</script>