从 Web API 后端在 Angular 应用程序中显示图像时获取 HTTP 状态：401

Question

当我尝试在 Angular 19 应用程序中从 ASP.NET Core 8.0 Web API 获取并显示图像时，我在控制台中收到状态代码：401。请仔细阅读下面的案例场景。

我正在从我的 Angular 应用程序上传图像，并将其复制到我的 Web API 项目结构中的 Resources 下名为 RecipeImages 的文件夹中，即。路径是

WebAPI project --> Resources --> RecipeImages (images are copied here)

同时，我正在将路径保存在数据库中。图像完全复制到所需的路径。相应的路径也被保存在数据库中。

数据库中保存路径的示例是：

资源\RecipeImages\Nigella_GarlicButterMushroom_638706726811613226.jpg

请注意，路径带有反斜杠。我按照本教程中使用的方法来完成任务：
https://code-maze.com/upload-files-dot-net-core-angular/

现在我正在尝试在组件中显示此图像。在

ngOnInit

上，我编写了代码来调用后端服务并从该数据库表中获取所有数据。获取它们并准备绑定到图像控件的

src

属性的路径。

组件.html：

<img [src]="createImagePath(selectedRecipeDetails.imagePath)" alt="" class="circular_recipe" style="height:410px; width: 410px;" />

组件.ts：

createImagePath(path: any) {
  return `https://localhost:7164/${path}`;
}

当我检查页面上的空白/空图像元素时，我在 src 属性上获得的完整路径如下：

src="https://localhost:7164/Resources\RecipeImages\Nigella_GarlicButterMushroom_638706726811613226.jpg"

7164 是我的 Web API 后端运行的端口号。正如你所看到的，正斜杠和反斜杠有很多混乱。

我还在 Program.cs 中进行了代码更改，以便我的 Web API 后端可以提供静态文件 - 像这样：

程序.cs：

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers()
    .AddNewtonsoftJson(opts =>
    {
        opts.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
    });
builder.Services.Configure<FormOptions>(o =>
{
    o.ValueLengthLimit = int.MaxValue;
    o.MultipartBodyLengthLimit = int.MaxValue;
    o.MemoryBufferThreshold = int.MaxValue;
});

builder.Services.AddSwaggerExplorer()
    .InjectDbContext(builder.Configuration)
    .AddAppConfig(builder.Configuration)
    .AddIdentityHandlersAndStores()
    .AddIdentityAuth(builder.Configuration);

builder.Services.AddApplicationServices();

var app = builder.Build();

app.ConfigureCORS(builder.Configuration)
    .ConfigureSwaggerExplorer()
    .AddIdentityAuthMiddlewares();

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Resources")),
    RequestPath = new PathString("/Resources")
});

app.MapControllers();

app.Run();

基本上，我按照教程做了所有事情。不过，我不明白为什么我无法在组件中渲染图像。我下载并运行了该教程中的完成项目，以确保它是可行的。是的！

但是为什么我的应用程序出现异常呢？不用说，如果我手动将数据库中保存的路径中的所有反斜杠更改为正斜杠，它仍然没有任何作用！我的图像控件仍然空白。

你们能发现什么吗？有什么我可能忽略的小细节吗？或者前端和后端是否需要添加/编辑更多代码？

请帮忙解决这个问题！

Answer 1

正如评论中提到的，中间件顺序影响请求的处理方式。

从链接来看，静态文件中间件（

UseStaticFiles

）应放置在 CORS 中间件（

UseCors

）以及身份验证和授权中间件之前。

var app = builder.Build();

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Resources")),
    RequestPath = new PathString("/Resources")
});

app.ConfigureCORS(builder.Configuration)
   .ConfigureSwaggerExplorer()
   .AddIdentityAuthMiddlewares();

app.MapControllers();

app.Run();