Works with trailing slash, but cannot make it work without. (static web-app)

[flindby]

When I configure Yarp in-front of my web-application (static vue) it works as expected when I access it with a trailing slash:
http://localhost:7000/app/ but with just /app I can't make it work. When it works my URL results in: "http://localhost:7000/app/#/myStartPage"

Config:

"ReverseProxy` : {
   "Routes" : {
    "webapp-service": {
        "ClusterId": "webapp-service-cluster",
        "Match": {
          "Path": "/app/{**catch-all}"
        },
        "Transforms": [
          { "PathRemovePrefix": "/app" }
        ]
      },
      "webapp-service-base": {
        "ClusterId": "webapp-service-cluster",
        "Match": {
          "Path": "/app"
        },
        "Transforms": [
          { "PathRemovePrefix": "/app" }
        ]
      },
    "Clusters: {
      "webapp-service-cluster": {
        "Destinations": {
          "webapp-service/1": {
            "Address": "http://localhost:6003"
          }
        }
      }
   }
}

The problem is that my browser expecting the static files to be directly under:
http://localhost:7000/js/app.js for instance. When they should be fetched from :7000/app/js/app.js. I have tried different types of transforms but none have worked for me.

[flindby]

I solved it with a ASP.NET redirect, like so:

var rewriteOptions = new RewriteOptions();
rewriteOptions.AddRedirect("^(.*/)?app$", "$1app/", 301);
app.UseRewriter(rewriteOptions);

app.UseEndpoints(enpoints => endpoints.MapReverseProxy())"

But can this be solved with a more straightforward approach?

[Tratcher]

/app and /app/ are technically different resources and the client needs to know which one it's accessing in order to correctly resolve any relative resources. E.g. /app + relative resource file.css = /file.css, but E.g. /app/ + relative resource file.css = /app/file.css.

The 301 is the correct way to unify these paths, regardless of the presence of the proxy.

[flindby]

Great, thanks for the explanation.