Blazor WebAssembly .NET 8 WebAPI跨域（CORS）问题求助

预渲染时正常、完全加载后报错的核心原因：

• 预渲染阶段是服务器端发起请求，不受浏览器CORS策略限制；
• 应用完全加载后，请求由浏览器客户端发起，直接访问外部API会触发浏览器的CORS校验，而目标APIhttps://example.com未配置允许你的客户端域名（https://localhost:7280）的跨域权限，因此报错。

你在Server项目（BlazorApp1）中配置的CORS策略完全错误——该配置是用来允许外部访问你的Server API，而非允许你的客户端访问外部API。Blazor WebAssembly客户端本身无法配置CORS，必须通过以下两种方式解决：

通过你的Server项目作为中间层转发请求，绕开浏览器CORS限制：

1. 修改Server项目（BlazorApp1） #

步骤1：添加代理API控制器 #

在Server项目中新建Controllers/ProxyController.cs：

using Microsoft.AspNetCore.Mvc;

namespace BlazorApp1.Controllers;

[ApiController]
[Route("api/[controller]")]
public class ProxyController : ControllerBase
{
    private readonly HttpClient _httpClient;

    public ProxyController(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    [HttpGet]
    public async Task<IActionResult> ForwardRequest()
    {
        var request = new HttpRequestMessage(HttpMethod.Get, "https://example.com");
        request.Headers.Add("oid", "00000000-0000-0000-0000-000000000000");

        var response = await _httpClient.SendAsync(request);
        response.EnsureSuccessStatusCode();

        var content = await response.Content.ReadAsStringAsync();
        return Ok(content);
    }
}

步骤2：修正Server的program.cs #

删除无用的CORS配置，确保API路由生效：

builder.Services.AddHttpClient();

var app = builder.Build();

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapControllers(); // 新增：启用API控制器路由
app.MapFallbackToFile("index.html");

app.Run();

2. 修改Client项目（BlazorApp1.Client） #

步骤1：修正program.cs的HttpClient配置 #

设置基础地址为Server域名：

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

步骤2：修改Home.Razor请求代理API #

@page "/"
@inject HttpClient Http

response: @resptext

@code {
    public string resptext { get; set; } = "";

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // 请求Server的代理接口，而非直接访问外部API
            var response = await Http.GetAsync("api/proxy");
            response.EnsureSuccessStatusCode();
            resptext = await response.Content.ReadAsStringAsync();
        }
        catch (Exception ex)
        {
            resptext = ex.Message;
        }
    }
}

如果可以修改https://example.com的服务器配置，直接在目标API的后端添加CORS策略，允许你的Blazor客户端域名访问：

以ASP.NET Core为例，在目标API的program.cs中添加：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowBlazorClient", policy =>
    {
        policy.WithOrigins("https://localhost:7280") // 你的Blazor客户端地址
              .AllowAnyHeader() // 允许自定义头oid
              .AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseCors("AllowBlazorClient"); // 必须放在路由和授权中间件之前
// 其他中间件配置...

配置完成后，你的Client项目可以直接请求https://example.com，无需代理。

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