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

Question

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

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

我的角度项目服务选项是，

"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 所做的完全相同的操作。

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