.net core 8 Web API CORS 与 Angular18 前端的问题

Question

我遇到了 CORS 问题，我根本无法理解，希望有人可以帮助我。 前端是 Angular 18。 我的后端 .net core 8 Web API 有一些端点，但由于某种原因并非所有端点都能工作。 本地主机上的一切都按照我的预期进行，登录等都非常顺利。 但一旦我发布了 Web api，只有我的一些端点可以工作。

• https://tools.brokenholiday.online/audio-converter 该组件的端点按我的预期工作，一切都很好。

• https://tools.brokenholiday.online/login 处理登录请求的端点返回

Access to fetch at 'https://api.brokenholiday.online/authenticate/login' 
from origin 'https://tools.brokenholiday.online' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

我的程序.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 Core 8 Web API 设置中遇到的 CORS（跨源资源共享）问题可能是由于后端中 CORS 策略的配置方式造成的。

从

Program.cs

中的配置代码中，我注意到一些可能导致 CORS 问题的事情：

1. 允许的来源： 在您的 CORS 策略中，您正在使用

   .WithOrigins("https://*.brokenholiday.online", "http://localhost:4200")

   。确保 CORS 中间件正确处理通配符子域语法。如果通配符子域未按预期运行，请尝试直接指定客户端的完整 URL。

2. 响应中缺少标头： 该错误消息表明响应中没有

   Access-Control-Allow-Origin

   标头。这可能是由于缺少中间件调用或未正确应用策略。

3. 策略名称一致性： 您定义名为

   "AllowSpecificOrigin"

   的 CORS 策略，但确保使用

   app.UseCors("AllowSpecificOrigin")

   正确引用它。仔细检查策略名称以确保其完全匹配。

4. 中间件的顺序：确保

   app.UseCors()

   正确放置在中间件管道中。理想情况下，它应该放置在映射任何端点之前，即在

   app.UseAuthentication()

   、

   app.UseAuthorization()

   和

   app.MapControllers()

   之前。

建议更改：

这是 CORS 配置的修改版本，并进行了更正：

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

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

其他步骤：

• 检查服务器日志：查看服务器日志以确保 CORS 中间件正确应用，没有错误。
• 浏览器缓存：清除浏览器缓存或在隐身窗口中进行测试，以避免缓存的 CORS 标头导致问题。
• 网络选项卡检查：使用浏览器的开发人员工具（网络选项卡）检查请求和响应标头，以确认是否正确设置了

  Access-Control-Allow-Origin

  。