本地运行API与Web应用遇CORS跨域错误，求解决方案

我查过相关资料但没解决，推测是所有服务本地运行导致的。我有个MAUI应用，用私有IP调用本地ASP.NET Core（C#）API向本地SQL Server发数据，功能正常，代码如下：

var response = await http_client.PostAsync(
    "http://192.168.X.X:5000/api/response",
    content
);

现在要通过Web应用以同样方式调用这个API，但遇到了问题。Web应用按钮点击事件代码：

document.getElementById("test-btn").addEventListener("click", async () => {

    const res = await fetch("http://192.168.X.X:5000/api/response", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            alertIDLong: crypto.randomUUID(),
            alertIDShort: crypto.randomUUID().slice(0, 8),
            information: document.getElementById("message-input").value,
            eventDateTime: new Date().toISOString()
        })
    });
});

执行时出现错误：

Access to fetch at 'http://192.168.X.X:5000/api/response' from origin 'https://localhost:7000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试在API的Program.cs里配置CORS，但没解决，代码如下：

using AzureNotificationDemo.Hubs;
using AzureNotificationDemo.Services;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSignalR();
builder.Services.AddHttpClient<DatabaseService>();
builder.Services.AddSingleton<NotificationService>();
builder.Services.AddControllers();

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin", policy =>
    {
        policy
            .WithOrigins("http://192.168.1.169")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

var app = builder.Build();

app.UseStaticFiles();

app.UseRouting();

app.UseCors("AllowLocalFrontend");

app.UseAuthorization();

app.MapControllers().RequireCors("AllowLocalFrontend");
app.MapHub<DatabaseHub>("/databaseHub");

var dbService = app.Services.GetRequiredService<DatabaseService>();
_ = Task.Run(() => dbService.PollForUpdates());

app.Run();

解决方案 #

你当前的CORS配置存在几个关键问题，逐一修正即可：

• 策略名称不匹配：你定义的CORS策略叫AllowSpecificOrigin，但实际使用的是AllowLocalFrontend，两者名称不一致，导致配置的策略根本没生效。
• 未包含Web应用的源：错误提示里Web应用的源是https://localhost:7000，但你配置的WithOrigins只加了http://192.168.1.169，需要把Web应用的源也加进去。

修正后的Program.cs代码：

using AzureNotificationDemo.Hubs;
using AzureNotificationDemo.Services;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSignalR();
builder.Services.AddHttpClient<DatabaseService>();
builder.Services.AddSingleton<NotificationService>();
builder.Services.AddControllers();

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowLocalFrontend", policy =>
    {
        policy
            // 加入Web应用的源，注意协议是https
            .WithOrigins("https://localhost:7000", "http://192.168.1.169")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();
    });
});

var app = builder.Build();

app.UseStaticFiles();

app.UseRouting();

// 确保使用的策略名称与定义一致
app.UseCors("AllowLocalFrontend");

app.UseAuthorization();

app.MapControllers().RequireCors("AllowLocalFrontend");
app.MapHub<DatabaseHub>("/databaseHub");

var dbService = app.Services.GetRequiredService<DatabaseService>();
_ = Task.Run(() => dbService.PollForUpdates());

app.Run();

额外说明：

• 若Web应用后续部署到其他环境，需同步更新WithOrigins中的源地址；
• 开发环境可临时用AllowAnyOrigin()测试，但生产环境必须指定具体源，避免安全风险；
• 确认API的端口、地址与Web应用调用的完全一致，无拼写错误。

内容的提问来源于stack exchange，提问作者Fish1996