Blazor WASM on Apache is not able to find my API endpoints at all

Question

So, I have a Blazor WASM solution that I've compiled for Linux and am running behind Apache. I am using my publish\wwwroot folder as the document root in Apache, with the following VirtualHosts and Directory config for Apache (with SSL paths and the site's name redacted):

<Directory /etc/apache2/blazor/publish/wwwroot>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

<VirtualHost *:80> 
  ServerName SITENAME.com
  
  Redirect permanent / https://SITENAME.com/
</VirtualHost>

<VirtualHost *:80> 
  ServerName www.SITENAME.com
  
  Redirect permanent / https://SITENAME.com/
</VirtualHost>

<VirtualHost *:443>
    ServerName SITENAME.com
        SSLEngine on
        SSLCertificateFile /SSLPATH
        SSLCertificateKeyFile /SSLPATH
        SSLCertificateChainFile /SSLPATH
        
        
    DocumentRoot "/etc/apache2/blazor/publish/wwwroot"
    ErrorDocument 404 /index.html

    AddType application/wasm .wasm
    AddType application/octet-stream .dll

    <Directory "/etc/apache2/blazor/publish/wwwroot">
        Options -Indexes
        AllowOverride None
    </Directory>

    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE application/octet-stream
        AddOutputFilterByType DEFLATE application/wasm
        <IfModule mod_setenvif.c>
        BrowserMatch ^Mozilla/4 gzip-only-text/html
        BrowserMatch ^Mozilla/4.0[678] no-gzip
        BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    </IfModule>
    </IfModule>

    ErrorLog /etc/apache2/blazor/blazorapp-error.log
    CustomLog /etc/apache2/blazor/blazorapp-access.log common
</VirtualHost>

When I go to my site, it loads up just fine, it seems to load all the.razor pages and execute client-side code just perfectly well.

However, I cannot reach - through the browser or through Postman or through anything - any of the API endpoints running on the server. It simply cannot find/reach them. I have tried opening the ports explicitly in ufw (I'm running on Ubuntu 20.10), specifying different ports (and opening them) for the endpoints in my Blazor's launchsettings, I've tried having them listen on port 443 on the off chance that the API requests are being redirected to port 443 by Apache, and nothing works - I literally cannot get them, I just get the Error 404 index.html in response (which of course is not good) with body text of "An unhandled error has occurred."

My launchsettings:

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:52679/",
      "sslPort": 44376
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "PROJECTNAME": {
      "commandName": "Project",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "https://localhost:5001;http://localhost:5000"
    }
  }
}

The ports on the bottom, for the last applicationUrl, are what is actually used in production, and despite opening and trying to reach those specific ports (5001 and 5000), or changing those ports to 443 and 80 respectively, nothing works.

There's no problem with the actual routing of the controllers that makes itself known during debugging, debugging on my development machine works just fine, everything is able to be reached. I have no idea what's going on here to make the published version on Apache not able to reach its own Endpoints, and it's driving me absolutely crazy.

I have also tried using the following configuration lines in my Apache configuration, and it actually just seemed to make the entire site unreachable:

<VirtualHost *:*>
    RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}
</VirtualHost>

<VirtualHost *:443>
    ProxyPreserveHost On
    ProxyPass / https://127.0.0.1:5001/
    ProxyPassReverse / https://127.0.0.1:5001/
...
...
etc...

I am completely out of ideas. If anyone else has compiled a Blazor WASM project to run on Linux with Apache, please share your knowledge, to spare me from my pain, lol.

Links to things I've tried or written off as "this problem isn't what I'm having":

https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-apache?view=aspnetcore-5.0 (where I got the Proxy config ideas from - which merely made my site unreachable, didn't help me reach my API endpoints)

ASP.NET Core 3.0 Controller Routing Not Working (the code in the answer is already in my solution, and debugging the controllers works just fine, it's only when deployed that issues arise)

In Blazor WebAssembly solution, how to host the Blazor WASM client app on a different port to the server API (This guy is just trying to add "/api" to his controller routing, which is already part of my routing scheme and not the issue as far as I can tell)

Asp.net core deployment not working on server but works on machine (I am already compiling for "anyCPU")

Likely others that I can't readily find currently... Been debugging and trying to fix this for over 10 hours. I can't tell what the problem is to even begin to be able to fix it, and I can't find anyone online having the same problem.

Lastly, an example of the actual error itself, with mentions of the site name redacted - this is what happens when I make an API call, and get the HTML for my error page in response, and then try to convert that to an INT since it wasn't caught by any error handling prior to the conversion in a.razor page:

System.FormatException: Input string was not in a correct format. at System.Number.ThrowOverflowOrFormatException (System.Boolean overflow, System.String overflowResourceKey) <0x35ec788 + 0x0002a> in <filename unknown>:0 at System.Number.ParseInt32 (System.ReadOnlySpan`1[T] value, System.Globalization.NumberStyles styles, System.Globalization.NumberFormatInfo info) <0x35c2c58 + 0x00048> in <filename unknown>:0 at System.Int32.Parse (System.String s, System.IFormatProvider provider) <0x35ebd38 + 0x00030> in <filename unknown>:0 at System.Convert.ToInt32 (System.String value) <0x35ebcf0 + 0x00016> in <filename unknown>:0 at REDACTED.Client.Pages.MainApplication.OnInitializedAsync () [0x00157] in C:\Users\codef\source\repos\REDACTED\REDACTED\Client\Pages\MainApplication.razor:100

RETURNED VALUE FROM API CALL: <!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>REDACTED</title> <meta property="og:title" content="REDACTED" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://REDACTED.com" /> <meta property="og:image" content="https://REDACTED.com/Promotional/Screenshots/Raw/Analysis%20Portfolio_7.png" /> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="css/Table.css" rel="stylesheet" /> <link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" /> <link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css"> <link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css"> </head> <body> <app>Loading...</app> <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 src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script> <script src="plotly-latest.min.js"></script> <script src="JavaScript.js"></script> <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> <script> window.scrollToElementId = (elementId) => { console.info('scrolling to element', elementId); var element = document.getElementById(elementId); if (!element) { console.warn('element was not found', elementId); return false; } element.scrollIntoView(); return true; } </script> <style type="text/css"> #mc_embed_signup { background: #fff; clear: left; font: 14px Helvetica,Arial,sans-serif; } </style> </body> </html>

Answer 1

I did have trouble running on apache. In my case was because the Blazor index.html was not at the server root.

My index.html was at /app

So I prefixed each page directive with Pages/, like so:

@page "/Pages/SupportRequest"

then in httpd.conf

RewriteEngine on
RewriteRule "^/app/Pages/.*$" "/app/index.html"

and index.html

    <base href="/app/" />

NOTE: in the index.html in your project it will still need to be:

    <base href="/" />

so you will have to make the change during deployment