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

时间:2018-07-04 18:15:42

标签: angular asp.net-core-webapi static-files

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

{
  "/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}}>

我的后端静态文件位于共享路径为“ Data ”的其他静态文件夹“ SystemData ”中。

说我有一个带有相对路径的文件:/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;
}

谢谢。

1 个答案:

答案 0 :(得分:1)

您想使用以"/Data"开头的URL,与以"/api"开头的URL完全一​​样。

所以...做同样的事情,然后在代理配置dor "/Data"中添加一个部分。