刷新后位于 .NET wwwroot 文件夹中的 Angular 应用程序为 404

Question

我只是创建简单的基本 .NET Core 6 和 Angular 16 应用程序。

我跑步

ng build --base-href=/ --output-path=D:\\myApp

然后我将所有这些构建文件移动到 Angular 应用程序中的 wwwroot 文件夹。

我的 Program.cs 类：

        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add services to the container.

            builder.Services.AddControllers();
            // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
            builder.Services.AddEndpointsApiExplorer();
            builder.Services.AddSwaggerGen();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseSwagger();
                app.UseSwaggerUI();
            }

            app.UseHttpsRedirection();
            app.UseCors(m => m.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
            app.UseAuthorization();

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


            app.MapControllers();

            app.Run();
        }

所有内容都托管在 IIS 上，有包含所有 dll、web.config 文件和 wwwroot 文件夹的 WebApplication，在这个 wwwroot 文件夹中我还获得了用于角度应用程序的 web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="AngularRule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

我做错了什么？

Answer 1

index.html 中的文件夹与 IIS 中的文件夹是否匹配？通常是 \inetpub\wwwroot\someapp 但在你的情况下是 d:\myapp

如果您订阅了pluralsight，可以观看 Shawn Wildermuth 专门制作的有关同时使用 .net 和 Angular 的视频。

另外，我习惯将 Cors 设置分为两部分。

在服务中设置：

 services.AddCors(options =>
 {
  options.AddPolicy("MyAllowedOrigins",
  policy =>
  {
  policy
  .AllowAnyOrigin()
  .AllowAnyHeader()
  .AllowAnyMethod();
   });
});

在应用程序中调用： app.UseCors("MyAllowedOrigins");