yarp rewriting hardcoded service urls

Question

I don't know, if my question is well formulated, but I try... I'm using yarp as a reverse proxy. Behind the proxy there is a asp.net core service (order-service) on port 5048 e.g.

So the config looks like the following:

"ReverseProxy": {
  "Routes": {
    "orderService": {
      "ClusterId": "orderServiceProps",
      "Match": {
        "Path": "/order-service/{**Remainder}"
      },
      "Transforms": [
        {
          "PathRemovePrefix": "/order-service"
        }
      ]
    }
  },
  "Clusters": {
    "orderServiceProps": {
      "Destinations": {
        "destination1": {
          "Address": "http://localhost:5048"
        }
      }
    }
  }
}

If I type e.g. http://localhost:8080/order-service/api/collection the request gets forwarded to http://localhost:5048/api/collection All well so far. But the order-service also has a simple html gui, which is showing some simple links to some special endpoints.

Now if I click on e.g. the settings link, the service navigates to http://localhost:5048/settings but I want the service navigates to http://localhost:8080/order-service/settings
I don't know if I can reach such a bahavior.
I don't want the user is seeing the 5048 in his browser!
And can I do this without let the service know that it is behind a proxy?

Artur · Answer 1 · 2022-05-29T06:16:10.430

On the order-service you should configure the X-Forwarded middleware like this:

// in ConfigureServices
services.Configure<ForwardedHeadersOptions>(options =>
{
    options.ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto;
    options.KnownNetworks.Clear();
    options.KnownProxies.Clear();
});

// in Configure
app.UseForwardedHeaders();

Check this for more info: Configure ASP.NET Core to work with proxy servers and load balancers

score 1 · Accepted Answer · answered Apr 16 '23 at 23:34

The problem is that your service creates links in HTML assuming it is running on localhost:5048, while from the browser perspective it is on different URL.

I do not know the way to make it work without any change to your service, but it is possible with minimal change.

First, make all your links relative, like <a href="settings"> instead of <a href="http://localhost:5048/settings"

Then your link, when the user clicks it, will lead to http://localhost:8080/settings, which is not yet what you want, but at least the host:port address is correct.

Second, when you render the HTML page (or serve it from a static file), add a base tag to HTML header, like this:

<head>
   ...
   <base href="http://localhost:8080/order-service/">
   ...
</head>

This will make your base address added automatically to all the relative links at your page, so <a href="settings"> will lead to http://localhost:8080/order-service/settings, just as you want it to.

As you can see, your service still has to be aware of the address it is accessed on, but it is localized in one place -- in the base tag.

This looks good. But I have a little trouble with the base tag. This must be something coming from a kind of config-file because I can't know how the infrastructur is looking (proxy - no proxy, what is the used url). Is there a pattern to use? This looks like a problem every service developer should have - so there must be a solution. — GreenEyedAndy, Apr 18 '23 at 08:30
@GreenEyedAndy hard to say without more context. But it looks like your service needs to know its base URL from outside. Maybe from a config file, as you suggest. — C-F, Apr 19 '23 at 23:07

yarp rewriting hardcoded service urls

2 Answers2

Linked