.NET 6 中Blazor WebAssembly配置UseCors解决跨域请求报错问题

你查到的CORS配置教程针对的是ASP.NET Core服务端应用，而你当前开发的是Blazor WebAssembly客户端应用，AddCors/UseCors属于服务端API，WebAssemblyHost自然不支持该扩展方法，本身逻辑上也不应该在客户端配置CORS。

浏览器的同源策略限制规则是：HTTPS站点默认禁止发起HTTP请求，跨域请求需要目标服务端返回正确的CORS响应头才能放行，该限制无法在前端侧绕过。

场景1：Blazor WASM 采用ASP.NET Core托管部署 #

直接在托管用的ASP.NET Core服务端项目中做接口转发即可，步骤如下：

1. 在服务端Program.cs中注册HttpClient：

builder.Services.AddHttpClient();

2. 服务端新增代理接口，示例代码：

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

    [HttpGet("status")]
    public async Task<IActionResult> GetStatus()
    {
        // 替换为实际要请求的第三方HTTP接口地址
        var result = await _httpClient.GetStringAsync("http://目标接口地址/status");
        return Content(result, "application/json");
    }
}

3. Blazor客户端直接请求同域的代理接口，不会触发跨域限制：

// 把原来的第三方接口请求地址替换为自有服务端的代理接口
var data = await httpClient.GetFromJsonAsync<Status>("api/proxy/status");

场景2：Blazor WASM 独立部署 #

• 生产环境：自行搭建反向代理服务（Nginx、Node.js、ASP.NET Core均可），将指定前缀的请求转发到目标HTTP接口，Blazor客户端请求代理服务的地址即可。
• 本地开发调试：可通过Chrome禁用安全策略临时绕过，操作方式：
  • 新建Chrome快捷方式，右键打开属性
  • 在「目标」输入框的内容末尾添加参数：--disable-web-security --user-data-dir="C:\ChromeDevTemp"
  • 用该快捷方式打开浏览器调试即可，该方案仅可用于本地开发，不能用于生产环境。

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