Blazor behind NodeJS proxy with different URL

Question

Hello,

I have a Blazor server app built with .Net 7 that I am deploying to several different pieces of hardware. Each deployment will be accessed through a proxy built with NodeJS via a URL such as "/remote/device/id." The 'id' portion is unique for each deployment, and NodeJS will read that portion to determine which deployment to proxy to.

The problem that I am having is that after the initial GET request, all of the follow-up calls from the Blazor code now running in the browser do not use the browser's URL (meaning that instead of calling something like "/remote/device/id/_framework" it just calls "/_framework", and NodeJS doesn't know what to do with that).

I tried changing the <base > href in the _Host.cshtml file, and that fixed some of it, but none of the images are found as they're still being requested via the relative path of "/images/img.png" and not "/remote/device/id/images/img.png."

Is there a way to make sure that all traffic and resource calls from the Blazor code running in the browser prepends something onto the path it submits?

Answer 1

If the image urls start with ./ (or without a slash), then the browser will honor the base href. the base href sets the relative path for the browser. if you start with "/", then its an absolute path.

(correction)

Answer 2

Putting a dot in front of all of the img src paths solved it. So instead of “/images” it became “./images.”

Answer 3

Adding a dot before the img src urls solved it. Meaning change “/images/“ to “./images/“ and then everything works fine.