如何在Blazor静态Web应用中正确配置启用CORS？

你所有CORS配置不生效的核心原因是搞反了CORS的配置主体：CORS校验是浏览器的安全机制，要求被请求的目标服务返回合规的CORS响应头，所有在前端/请求发起侧做的CORS配置都不会生效。

你之前的三次尝试全部存在方向错误：

• 配置Static Web Apps的globalHeaders：该配置仅会给当前静态站点自身返回的资源添加响应头，如果你调用的是其他域名下的API，浏览器校验的是API返回的响应头，和你前端站点的头配置没有关系。
• 在Blazor代码中调用AddCors添加CORS策略：AddCors/UseCors是ASP.NET Core服务端的中间件能力，Blazor WASM是运行在用户浏览器内的客户端框架，没有服务端中间件的执行环境，这段代码不会产生任何实际效果。
• 在HttpClient请求中手动添加Access-Control-Allow-*头：这类字段属于服务端返回的响应头，不是客户端发起请求时需要携带的请求头，手动添加这类头反而会触发浏览器的非简单请求预检，直接被安全策略拦截。

正确配置方案，根据你的API部署场景选择： #

场景1：调用的是SWA集成的托管Azure Functions API

不需要手动配置CORS。不要使用API的全限定域名发起请求，直接使用/api/[接口路径]的相对路径调用即可，SWA会自动在服务端做请求代理，同域请求不存在跨域问题。

场景2：调用的是你可控的独立部署外部API

你必须在目标API的服务端配置CORS规则：

• 给所有接口响应添加Access-Control-Allow-Origin头，值为你的Blazor SWA站点域名，本地调试阶段可临时设置为*
• 处理浏览器自动发送的OPTIONS预检请求，返回匹配的Access-Control-Allow-Methods、Access-Control-Allow-Headers头
• 如果接口需要携带认证凭据（Cookie、Token等），不能使用*作为允许源，必须明确指定前端域名，同时添加Access-Control-Allow-Credentials: true响应头

场景3：你没有目标API的修改权限

可以通过SWA的反向代理能力绕开跨域限制：
在SWA项目根目录创建staticwebapp.config.json配置文件，添加路由代理规则：

{
  "routes": [
    {
      "route": "/api-proxy/*",
      "rewrite": "https://你要调用的API域名/{*path}"
    }
  ],
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*"
  }
}

配置完成后，前端不再直接请求外部API域名，而是请求你SWA站点下的/api-proxy/[接口路径]地址，SWA会在服务端转发请求、添加CORS响应头后返回给浏览器，不会触发跨域拦截。

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