.NET Core9+Angular17集成FastReport OpenSource时API路径配置错误求助

问题背景 #

使用.NET Core 9后端 + Angular 17前端集成FastReport OpenSource 2025.1.0，已安装依赖：

• FastReport.OpenSource
• FastReport.OpenSource.Export.PdfSimple
• FastReport.OpenSource.Web

后端API生成报告并返回HTML内容，前端通过iframe嵌入后，FastReport自动发起的请求错误指向前端地址（http://localhost:4200/_fr/preview.getReport?reportId=xxx），而非后端地址（http://localhost:44393/_fr/preview.getReport?reportId=xxx），导致报告无法正常渲染。

当前后端实现代码 #

[HttpGet("CustomerListReport")]
public async Task<IActionResult> GenerateCustomerListReport(string reportName)
{
    WebReport webReport = new WebReport();
    webReport.Width = "100%";

    var dataTable = customerServices.CustomerReportData(1); // 获取报告数据

    string reportPath = Path.Combine("App_Data\\ReportFile", $"{reportName}.frx");
    webReport.Report.Load(reportPath);
    webReport.Report.RegisterData(dataTable, reportName);
    webReport.Report.Prepare();

    var htmlContent = webReport.Render().Result.Value;
    return Content(htmlContent, "text/html");
}

当前前端实现代码 #

TypeScript逻辑 #

this.DashboardService.getReportUrl().subscribe((htmlContent: any) => {
  const iframe = document.getElementById('reportIframe') as HTMLIFrameElement;
  const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
  if (iframeDoc) {
    iframeDoc.open();
    setTimeout(() => {
      iframeDoc.write(htmlContent);
      iframeDoc.close();
    }, 100);
  }
});

HTML模板 #

<iframe #report id="reportIframe" height="1000" width="100%"></iframe>

解决方案 #

1. 配置WebReport的API基础路径 #

在后端创建WebReport实例时，指定BasePath属性为后端/_fr接口的完整根地址，这会覆盖FastReport生成HTML中的默认请求路径，确保所有报告相关请求指向后端：

[HttpGet("CustomerListReport")]
public async Task<IActionResult> GenerateCustomerListReport(string reportName)
{
    WebReport webReport = new WebReport();
    webReport.Width = "100%";
    // 核心配置：指定FastReport请求的后端API根路径
    webReport.BasePath = "https://localhost:44393/_fr";

    var dataTable = customerServices.CustomerReportData(1);

    string reportPath = Path.Combine("App_Data\\ReportFile", $"{reportName}.frx");
    webReport.Report.Load(reportPath);
    webReport.Report.RegisterData(dataTable, reportName);
    webReport.Report.Prepare();

    var htmlContent = webReport.Render().Result.Value;
    return Content(htmlContent, "text/html");
}

2. 确保后端注册FastReport中间件 #

在Program.cs中添加FastReport服务和中间件配置，保证/_fr系列接口能被正确处理：

var builder = WebApplication.CreateBuilder(args);

// 注册FastReport服务
builder.Services.AddFastReport();

var app = builder.Build();

// 启用FastReport中间件，需放在路由配置之前
app.UseFastReport();

app.UseHttpsRedirection();
app.UseAuthorization();

app.MapControllers();

app.Run();

3. 配置跨域策略（必选） #

由于前后端域名端口不同，需在后端配置CORS允许前端域名访问：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp",
        policy => policy.WithOrigins("https://localhost:4200")
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials());
});

// 在中间件链中启用CORS
app.UseCors("AllowAngularApp");

4. 优化前端iframe加载逻辑 #

移除不必要的setTimeout，避免延迟导致的渲染异常：

this.DashboardService.getReportUrl().subscribe((htmlContent: any) => {
  const iframe = document.getElementById('reportIframe') as HTMLIFrameElement;
  const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
  if (iframeDoc) {
    iframeDoc.open();
    iframeDoc.write(htmlContent);
    iframeDoc.close();
  }
});

关键说明 #

• WebReport.BasePath是解决路径问题的核心配置，它直接控制FastReport生成的HTML中所有请求的根地址。
• 必须确保FastReport中间件在路由配置前注册，否则/_fr接口无法被后端处理。
• 跨域配置是前后端分离场景下的必要步骤，否则浏览器会拦截跨域请求。

内容的提问来源于stack exchange，提问作者Parth M. Dave