基于.NET Core Web API与Blazor WASM的DevExpress报表对接问题

一、确认API端报表服务配置完整性 #

• 检查Program.cs中是否正确注册DevExpress报表服务及中间件：

  // 注册DevExpress服务
  builder.Services.AddDevExpressControls();
  // 注册自定义ReportFactory
  builder.Services.AddScoped<ReportFactory>();
  
  // 配置中间件（放在UseRouting之后，UseEndpoints之前）
  app.UseDevExpressControls();
  app.MapControllers();
  

• 确保ReportFactory的报表实例逻辑正确，能根据名称返回对应XtraReport：

  public class ReportFactory {
      public XtraReport GetReport(string reportName) {
          switch(reportName) {
              case "MyReport":
                  return new MyCustomReport(); // 你的自定义报表类
              default:
                  throw new ArgumentException("无效的报表名称");
          }
      }
  }
  

二、配置Blazor WASM客户端的API连接 #

• 在客户端Program.cs中配置HttpClient指向API地址，并注册DevExpress报表服务：

  // 配置HttpClient，替换为你的API实际运行地址
  builder.Services.AddScoped(sp => new HttpClient { 
      BaseAddress = new Uri("https://localhost:5001/") 
  });
  
  // 注册DevExpress Blazor报表服务
  builder.Services.AddDevExpressBlazorReporting();
  

三、在Report.razor页面中绑定报表服务 #

• 引入命名空间并使用DxReportViewer控件，关联API服务和目标报表：

  @page "/report"
  @using DevExpress.Blazor.Reporting
  
  <DxReportViewer 
      ReportUrl="MyReport" <!-- 与ReportFactory中的报表名称一致 -->
      RemoteServiceUri="https://localhost:5001/" /> <!-- API服务地址 -->
  

四、解决跨域访问问题 #

如果API和客户端运行在不同端口/域名，需在API端配置CORS策略：

// 在Program.cs中添加CORS服务
builder.Services.AddCors(options => {
    options.AddPolicy("AllowBlazorClient", policy => 
        policy.WithOrigins("https://localhost:5002") // 替换为你的Blazor客户端地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials());
});

// 启用CORS中间件（放在UseRouting之后，UseAuthorization之前）
app.UseCors("AllowBlazorClient");

五、验证调试 #

1. 先启动API项目，可通过浏览器访问https://localhost:5001/api/ReportDesigner/GetReport?reportName=MyReport，确认报表接口能正常返回数据
2. 启动Blazor WASM项目，访问/report页面，查看报表是否加载成功
3. 若失败，打开浏览器控制台查看网络请求错误信息，排查API地址、报表名称或权限配置问题

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