Angular 18 前端的 ASP.NET Core 8 Web API CORS 问题

Question

我遇到了 CORS 问题，我根本无法理解，希望有人可以帮助我。

我的前端是 Angular 18，后端是带有一些端点的 ASP.NET Core 8 Web API，但由于某种原因并非所有端点都能工作。

本地主机上的一切都按我的预期运行，登录等非常顺利。

但是一旦我发布 Web API，只有部分端点可以工作。

• https://tools.brokenholiday.online/audio-converter

该组件的端点按我的预期工作，一切都很好：

• https://tools.brokenholiday.online/login

处理登录请求的端点返回

从源“https://tools.brokenholiday.online”获取“https://api.brokenholiday.online/authenticate/login”的访问已被 CORS 策略阻止：无“Access-Control-Allow-Origin”标头存在于请求的资源上。
如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以在禁用 CORS 的情况下获取资源

我的

Program.cs

：

builder.Services.AddScoped<JwtSecurityTokenHandlerWrapper>();
builder.Services.AddControllersWithViews(options => {
    options.Filters.Add(typeof(JwtAuthorizeFilter));
});

builder.Services.AddCors(options => {
    options.AddPolicy("AllowSpecificOrigin",
        builder => builder
            .WithOrigins("https://*.brokenholiday.online", "http://localhost:4200")
            .SetIsOriginAllowedToAllowWildcardSubdomains()
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials());
});
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseMiddleware<JwtMiddleware>();
app.UseCors("AllowSpecificOrigin");

app.MapControllers();

app.UseHttpsRedirection();
app.UseAuthentication();
app.UseAuthorization();

app.Run();

Answer 1

在 .Net 8 中，微软更改了 SPA 代理，以便代理将在前端而不是后端实现。 （实际上更早，但在 .Net 8 中它是默认值）

这样做的问题是，可能会引入 CORS 错误，因为浏览器看到前端运行在：https://localhost:4200 但后端可能运行在 https://localhost:7010

例如，如果您在后端实现身份验证，使用标准身份验证中间件，对于 OAuth，挑战请求会告诉浏览器重定向到身份验证，然后返回到后端，例如：https://localhost:7010/登录-oidc

这就是引入 CORS 错误的地方，因为端口号使两个不同的 localhost 起源，并且浏览器将阻止，因为 :4200 和 :7010 是不同的起源域。

.Net Core 3 中较旧的 SPA 代理可用（我认为即使在 .Net 8 中使用 Microsoft.AspNetCore.SpaServices.Extensions，也会将代理置于后端，但 Visual Studio 的模板不再支持此功能。

微软确实创建了他们的 YARP（反向代理），有人将其实现为 AspNetCore.SpaYarp - 它将代理移动到后端，我一直在使用它来支持中间件 OAuth 身份验证，并且它运行良好。 您可以在这里找到它：https://github.com/berhir/AspNetCore.SpaYarp 并从 NuGet 安装它。