How to handle static files relative paths in web APIs?

Question

My Angular project is running on a different port than my API backend (asp.net). I am using a proxy to route all http requests to the backend webserver as shown below.

{
  "/api": {
     "target":  {
       "host": "localhost",
       "protocol": "https:",
       "port": 5001
     },
     "secure": false,
     "logLevel" : "debug",
     "changeOrigin": true
  }
}

my Angular project serve options are,

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "art-ng-core:build",
            "host": "www.artngcore.com",
            "port": 8500,
            "sslKey": "key.key",
            "sslCert": "server.crt"
          },
          "configurations": {
            "production": {
              "browserTarget": "art-ng-core:build:production"
            }
          }
        },

My issue here is static files served by the API i.e. Images.

<img src={{imagePath}}>

My backend static files are served in a different static folder "SystemData" with a shared path "Data".

Say I have this file with a relative path: /Data/UserData/test.jpg. if I provide src attribute with a relative path, the URL of the image will look like https://www.artngcore.com:8500/Data/UserData/test.jpg where it should be https://localhost:5001/Data/UserData/test.jpg

How can I proxy the call for static files the same way I did for Http calls?

for now, I worked around it by making my api to provide a full URL instead of relative paths but I am not sure if this is a common or good practice when it comes to handle static files.

I am saving relative paths in my database and I run the following method to generate the URL

public string GenerateUrl(string filePath, HttpRequest ctx) {
    string physicalPath = this.GetRootPath() + filePath;
    var url = physicalPath.Replace(Directory.GetCurrentDirectory (),$@"{ctx.Scheme}://{ctx.Host}").Replace(@"SystemData", @"Data");
    return url;
}

Thank you.

Answer 1

You want to do with URLs starting with "/Data" the exact same thing you did for URLs starting with "/api".

So... just do the same thing, and add a section in your proxy configuration dor "/Data".