ASP.NET Core 和 Angular 部署 - 页面刷新出现 404 错误

Question

我正在开发一个在 Plesk 上托管的 Angular 和 ASP.NET Core 项目。该项目工作正常，只是页面刷新产生 404 页面未找到错误。每当我从浏览器中点击刷新或重新加载页面时，都会出现 404 错误。

文件的结构如下图所示。

web.config 中的内容为：

在“wwwroot”文件夹中，我有来自 Angular 的构建，我在其中创建了一个包含以下内容的“web.config”文件：

此外，在“wwwroot”文件夹中，我还有包含以下内容的“index.html”文件：

请指导我解决这个问题。

谢谢！

Answer 1

昨晚我遇到了同样的问题，但使用的是后端使用 ASP .net 6.0 的 Vue 应用程序。
此处很好地解释了错误的原因，但我使用不同的解决方案来解决这个问题。

我的解决方案是在program.cs中添加一个MapFallbackTocontroller控制器：

app.MapControllers();
app.MapFallbackToController("Index", "Fallback");

await app.RunAsync();

然后创建所述FallbackController.cs：

[AllowAnonymous]
public class FallbackController : Controller
{
   public IActionResult Index()
   {
      return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "index.html"), "text/html");
   }
}

Answer 2

Net 6 和 Angular Spa 应用程序刷新 404 问题出现。随着索引 html 更改，在 program/startup.cs 中添加以下行，刷新问题已修复。
此处提到的片段

app.Use(async (context, next) =>{
            await next();
            if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        }); 

Answer 3

这对我来说是这样的：

// Configure endpoints
app.UseEndpoints(endpoints =>
{
    // your other endpoint mappings...
    endpoints.MapFallbackToFile("index.html");
});

Answer 4

您是否尝试添加

 <action type="Rewrite" url="./index.html" />

而不是

 <action type="Rewrite" url="/" />

Answer 5

在 .NET 7 上，在 Program.cs 中，这已经通过这行代码进行了处理。

app.MapFallbackToFile("index.html");

但是，如果您的 index.html 位于 wwwroot 内的子文件夹内，则以下是配置方法。

var fileProvider = new PhysicalFileProvider(
    Path.Combine(app.Environment.WebRootPath, "MySubFolder"));
app.MapFallbackToFile("index.html", new StaticFileOptions
{
    FileProvider = fileProvider,
    RequestPath = ""
});

如果index.html位于wwwroot之外的文件夹（例如：ClientApp/dist）中，则应像这样创建fileProvider。

var fileProvider = new PhysicalFileProvider(
    Path.Combine(app.Environment.ContentRootPath, "ClientApp", "dist", "index.html"));