ASP.NET Core 6 Angular 模板静态文件 404答案

【问题标题】：ASP.NET Core 6 Angular Template Static Files 404ASP.NET Core 6 Angular 模板静态文件 404
【发布时间】：2022-08-12 20:43:31
【问题描述】：

我在 Visual Studio 2022 (v17.1.0) 中使用“ASP.NET Core with Angular”模板创建了一个干净的项目。我将一个名为 \"images\" 的文件夹添加到 \"wwwroot\" 文件夹中。我将一个名为 \"logo.png\" 的图像添加到 \"images\" 目录中。我将图像标签添加到引用 logo.png 文件的 index.html 文件中。当我运行项目时，对图像的引用返回 404 错误。我已经尝试通过 \"~/images/logo.png\"、\"/images/logo.png\" 和 \"images/logo.png\" 来引用该文件。我还确保 \"app.UseStaticFiles()\" 包含在我的 \"Program.cs\" 文件中。我读过this MS article，我所做的一切似乎与他们所做的一致。网上的其他人似乎也遇到了类似的问题，但直到他们实际部署了应用程序。我无法从 Visual Studio 以调试模式显示图像。我确定我错过了一些简单的东西，但通常 Visual Studio 模板开箱即用。非常感谢任何帮助。

Angular 版本是 13.0.1。

一位同事告诉我问题是什么。 ASP.NET Core 6.0 模板在开发中使用反向代理。您必须更新 proxy.config.js 文件中的上下文常量以包含您希望在 wwwroot 下提供的任何内容。在创建项目时，上下文变量仅包括 \"/weatherforecast\"。希望这对其他人有帮助。
你能详细说明你是如何解决这个问题的吗？

标签： angular visual-studio asp.net-core

【解决方案1】：

在 proxy.conf.js 中，您将文件夹添加到“上下文”，如下所示：

   [...code added by VS...]
 
   const PROXY_CONFIG = [
       {
          context: [
             "/images",
             "/scripts",
             "/styles"
          ],
          target: target,
          secure: false,
          headers: {
             Connection: "Keep-Alive"
          }
       }
    ]

    module.exports = PROXY_CONFIG

您希望应用程序“查看”的任何文件夹都应添加到“上下文”属性中。

【讨论】：