Blazor WebAssembly独立项目CORS问题排查与解决求助

为什么修改IIS Express的applicationhost.config无效？ #

Blazor WebAssembly独立项目是纯前端应用，运行在浏览器环境中。当你从浏览器发起跨域请求到https://tapi.bale.ai时，CORS检查是浏览器针对目标服务器的响应头进行的——你本地IIS Express的配置只影响自身项目的服务端响应，和第三方目标服务器的响应完全无关，所以这个操作无法解决问题。

可行解决方案 #

方案1：请求目标服务器开启CORS权限 #

联系tapi.bale.ai的服务提供者，要求他们在接口响应中添加Access-Control-Allow-Origin头，允许你的Blazor应用所在域名（本地开发时通常是https://localhost:5001，生产环境则是你的正式域名）。如果对方支持通配符，也可以设置为*（但注意：带身份凭证的请求不能用*，必须指定具体域名）。

方案2：本地开发使用反向代理 #

通过配置反向代理，让前端请求先发送到本地IIS Express，再由代理转发到目标服务器，从根源上消除跨域问题。

具体配置步骤：

1. 在Blazor项目根目录创建proxy.conf.json文件，内容如下：

{
  "/api": {
    "target": "https://tapi.bale.ai",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

这里的/api是前端请求的前缀，原本的https://tapi.bale.ai/someLink/getUpdates需要改为/api/someLink/getUpdates，代理会自动将请求转发到目标地址。

2. 修改项目的Properties/launchSettings.json，在对应启动配置中添加代理参数：
   找到profiles下的IIS Express或BlazorApp配置，在commandLineArgs中加入--proxy-file proxy.conf.json，示例：

"profiles": {
  "IIS Express": {
    "commandName": "IISExpress",
    "launchBrowser": true,
    "commandLineArgs": "--proxy-file proxy.conf.json",
    "environmentVariables": {
      "ASPNETCORE_ENVIRONMENT": "Development"
    }
  }
}

3. 调整Blazor中HttpClient的请求地址：
   将原来的完整URL改为带代理前缀的路径，比如：

var response = await httpClient.GetFromJsonAsync<YourDataModel>("/api/someLink/getUpdates");

4. 重启Visual Studio和IIS Express，测试请求是否正常。

方案3：生产环境使用反向代理（如Nginx） #

如果是生产环境部署，可通过Nginx等反向代理服务器配置转发规则，让前端请求通过代理转发到目标服务器，避免跨域。示例Nginx配置：

server {
    listen 80;
    server_name your-blazor-domain.com;

    # 处理Blazor静态文件
    location / {
        root /path/to/blazor/dist;
        try_files $uri $uri/ /index.html;
    }

    # 转发API请求到目标服务器
    location /api {
        proxy_pass https://tapi.bale.ai;
        proxy_set_header Host tapi.bale.ai;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

同样，前端请求地址需改为/api/someLink/getUpdates。

额外注意事项 #

• 如果请求需要携带身份凭证（如Cookie、Token），目标服务器的CORS配置还需添加Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能使用*，必须指定具体域名。

内容的提问来源于stack exchange，提问作者abbas-h