Blazor WASM本地开发调用API端点时出现CORS错误

核心排查方向 #

• 补全Azure Functions本地CORS配置文件
  克隆项目后，local.settings.json通常因被加入.gitignore不会同步到本地，这是最常见的原因。直接在Azure Function项目根目录新建该文件，配置示例如下：

  {
    "IsEncrypted": false,
    "Values": {
      "AzureWebJobsStorage": "UseDevelopmentStorage=true",
      "FUNCTIONS_WORKER_RUNTIME": "dotnet"
    },
    "Host": {
      "LocalHttpPort": 7071,
      "CORS": "http://localhost:5000", // 替换为你的Blazor Client本地端口
      "CORSCredentials": true // 请求带凭证时需设为true，否则可删除
    }
  }
  

• 核对Blazor Client的API地址配置
  打开Client项目的appsettings.Development.json，确认ApiBaseUrl与Azure Functions本地运行端口一致，比如：

  {
    "ApiBaseUrl": "http://localhost:7071/api/"
  }
  

  同时检查Program.cs中是否正确读取该配置，示例代码：

  builder.Services.AddHttpClient("ApiClient", client =>
  {
      client.BaseAddress = new Uri(builder.Configuration["ApiBaseUrl"]);
  });
  

• 清除浏览器缓存或用隐私模式测试
  浏览器可能缓存旧的CORS规则，清空缓存后重试，或直接用隐私窗口打开页面，避免缓存干扰。

• 查看Azure Functions启动日志
  启动Azure Functions项目后，观察控制台输出，确认是否有CORS请求被拒绝的日志，以此验证配置是否正确加载。

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