.NET Core 7 API跨域配置问题：Blazor无法加载Swagger.json

针对你遇到的CORS错误，核心问题出在API中间件顺序和跨域嵌入限制两方面，以下是具体解决方案：

一、调整API项目的中间件顺序 #

当前API的Swagger中间件在CORS中间件之前执行，导致swagger.json请求未经过CORS处理，无法添加跨域响应头。修改WebApplication1/Program.cs的中间件顺序，确保CORS先于Swagger生效：

var app = builder.Build();

app.UseHttpsRedirection();
app.UseRouting();
app.UseCors(myAllowSpecificOrigins); // 先执行CORS中间件，覆盖所有后续请求

if (app.Environment.IsDevelopment())
{
    app.UseSwagger(); // Swagger相关请求将先经过CORS处理
    app.UseSwaggerUI();
}

app.UseAuthorization();

app.MapControllers();

app.Run();

二、优化CORS配置（推荐替代宽松规则） #

避免使用AllowAnyOrigin()的宽松配置，明确指定Blazor应用的域名，提升安全性：

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: myAllowSpecificOrigins,
        policy =>
        {
            policy.WithOrigins("https://localhost:7145")
                  .AllowAnyMethod()
                  .AllowAnyHeader();
        });
});

三、解决iframe直接嵌入Swagger UI的限制 #

如果你的需求是在Blazor页面通过<iframe>直接加载API的Swagger UI页面（如https://localhost:44323/swagger），API默认会发送X-Frame-Options: SAMEORIGIN头禁止跨域嵌入，需修改SwaggerUI配置移除该限制：

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(options =>
    {
        // 允许指定域名的iframe嵌入
        options.Headers = new Dictionary<string, string>
        {
            { "X-Frame-Options", "ALLOW-FROM https://localhost:7145" }
        };
    });
}

此时你无需在Blazor项目中配置Swagger，直接在Razor页面添加iframe即可：

<iframe src="https://localhost:44323/swagger" width="100%" height="800px" frameborder="0"></iframe>

验证步骤 #

1. 重启API和Blazor项目
2. 访问Blazor应用，检查浏览器控制台是否还有CORS或嵌入相关错误
3. 若仍有问题，确认API的端口44323和Blazor的端口7145未被占用，且请求地址无误

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