CODEWITHSUNDEEP
iisasp.net-core-webapiblazor-webassembly
fededim
fededim

Reputation: 229

Unable to load a Blazor webassembly application when published on IIS

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 ?

Upvotes: 3

Views: 2706

Answers (2)

Santosh Biradar
Santosh Biradar

Reputation: 31

If the Blazor Web Assembly app works while debugging but fails to load after deploying to IIS, then follow below steps

I faced this issue after deploying .Net Core 6.0 Blazor Web Assembly application to IIS

  1. Open the Index file
  2. Change the base href to your application virtual directory

enter image description here

  1. Clear the Cache
  2. Now browse your application
  3. It should run as below

enter image description here

Upvotes: 0

andris
andris

Reputation: 76

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>

Upvotes: 4

Related Questions