如何处理 Web API 中的静态文件相对路径？

Question

我的 Angular 项目运行ning 在与我的 API 后端 (asp.net) 不同的端口上。我正在使用代理将所有 http 请求路由到后端网络服务器，如下所示。

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

我的 Angular 项目服务选项是，

 "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"
            }
          }
        },

我的问题是 API 提供的静态文件，即图像。

<img src={{imagePath}}>

我的后端静态文件在不同的静态文件夹“SystemData”中提供，共享路径为“Data”。

假设我有一个带有相对路径的文件：/Data/UserData/test.jpg。如果我为 src 属性提供相对路径，则图像的 URL 看起来应该是 https://www.artngcore.com:8500/Data/UserData/test.jpg https://localhost:5001/Data/UserData/test.jpg

如何像代理 Http 调用一样代理静态文件调用？

现在，我通过让我的 api 提供完整的 URL 而不是相对路径来解决这个问题，但我不确定这是否是一种常见的或良好的做法处理静态文件。

我正在我的数据库中保存相对路径，我运行使用以下方法生成 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;
}

谢谢。

Answer 1

您希望对以 "/Data" 开头的 URL 执行与对以 "/api" 开头的 URL 完全相同的操作。

所以...做同样的事情，并在您的代理配置中添加一个部分 "/Data"。

如何处理 Web API 中的静态文件相对路径？

How to handle static files relative paths in web APIs?

angular

asp.net-core-webapi

static-files