Blazor WASM Client/Server/Shared部署问题求助

标准部署方案 #

Blazor WASM + Web API 有两种主流部署模式，可根据应用规模和需求选择：

• 同站点部署：将Client项目发布到API项目的wwwroot目录下，两者作为单个站点部署。这种方式无需配置跨域，部署流程简单，适合小型应用或快速上线场景。
• 分站点部署：Client和API分别部署为独立Web站点。适合需要独立扩容、使用不同域名/子域名的场景，此时必须配置CORS允许客户端域名访问API。

Shared项目处理 #

Shared项目是类库项目，无需单独部署：

• 它的代码会被编译到引用它的Client和API项目中（比如Client用Shared定义的DTO接收API数据，API用Shared的模型处理业务逻辑）。
• 发布Client或API时，Shared的编译产物会自动包含在对应项目的发布包内，你看到的“部署到文件夹”是类库的默认发布选项，但完全不需要执行这个操作，只要确保Client和API项目已正确引用Shared即可。

你的具体问题排查 #

1. API部署后返回HTML而非JSON #

出现这种情况通常是API路由或服务器配置问题：

• 检查API启动配置：确认Program.cs中已正确配置Web API服务，必须包含：

  builder.Services.AddControllers();
  // ...
  app.MapControllers();
  

  避免只配置Blazor相关服务而遗漏API路由映射。
• 验证路由匹配：确认Postman调用的端点路径与API控制器的路由一致，比如控制器是否标注了[Route("api/[controller]")]，调用时是否包含api前缀（如/api/Products而非/Products）。
• 检查服务器配置：如果用IIS部署，确保已安装ASP.NET Core模块，且应用池设置为无托管代码，同时将API部署为ASP.NET Core应用而非静态文件站点。
• 查看API日志：在服务器上启用日志（修改appsettings.json的Logging级别为Information），排查是否有路由匹配失败、服务启动异常等错误。

2. 客户端无法连接API #

重点检查地址配置和跨域设置：

• 确认客户端API基地址：Client项目的Program.cs或appsettings.json中，HttpClient的BaseAddress需指向API的实际部署地址。比如分站点部署时，要把本地地址替换为服务器API的域名/IP：

  builder.Services.AddScoped(sp => new HttpClient { 
      BaseAddress = new Uri("https://your-test-api-server.com/") 
  });
  

• 跨域配置（分站点部署时）：API必须配置CORS允许客户端域名访问，示例代码：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowClientOrigin",
          policy => policy.WithOrigins("https://your-test-client-server.com")
                          .AllowAnyHeader()
                          .AllowAnyMethod());
  });
  // 注意中间件顺序：在UseRouting之后、UseAuthorization之前添加
  app.UseCors("AllowClientOrigin");
  

• 浏览器网络排查：用开发者工具的网络面板查看客户端的API请求，检查请求地址、状态码（如404、403）和响应内容，定位具体错误原因。

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