如何修复Visual Studio 2022 .NET7 Blazor中Telerik报表查看器JSInterop错误

环境信息 #

• Visual Studio 2022
• Blazor Server 应用（.NET 7）
• Telerik 最新试用版

问题现象 #

按Telerik官方教程集成报表查看器组件后，浏览器无法显示报表；Visual Studio终端无报错，网站其他功能正常，仅报表页面无法工作；浏览器控制台出现JSInterop相关错误；新建空白项目测试仍出现相同问题。

错误截图 #

• 错误截图1:
• 错误截图2:
• 错误截图3:
• 错误截图4:

排查与修复步骤 #

1. 确认Telerik JS资源引入顺序 #

Blazor Server中Telerik报表查看器的JS资源必须按正确顺序引入，且要在Blazor框架脚本之后：

<!-- 在_Host.cshtml中配置 -->
<script src="_framework/blazor.server.js"></script>
<script src="https://kendo.cdn.telerik.com/[你的Telerik版本号]/js/kendo.all.min.js"></script>
<script src="/api/reports/resources/js/telerikReportViewer"></script>

注意替换[你的Telerik版本号]为实际安装的试用版版本，避免CDN版本与本地包版本不匹配。

2. 检查报表API控制器配置 #

确认ReportsController正确继承ReportsControllerBase且路由配置无误：

[Route("api/reports")]
public class ReportsController : ReportsControllerBase
{
    protected override IReportResolver CreateReportResolver()
    {
        return new UriReportResolver(Path.Combine(Directory.GetCurrentDirectory(), "Reports"));
    }

    protected override ICache CreateCache()
    {
        return new FileCache();
    }
}

同时验证Program.cs中是否已正确配置app.MapControllers();，且该代码需放在app.MapBlazorHub();之后。

3. 验证CORS设置（本地开发也需注意） #

即使本地开发，若报表API与Blazor站点存在端口差异，可能触发跨域问题，需在Program.cs中配置CORS：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 中间件顺序不可错
app.UseCors("AllowAll");

4. 清理缓存并重建项目 #

• 清理浏览器缓存（Ctrl+Shift+Delete），确保加载最新JS资源
• 在Visual Studio中执行清理解决方案 -> 重建解决方案
• 手动删除项目根目录下的bin和obj文件夹后重新编译

5. 检查Telerik许可证状态 #

试用版需通过Telerik Dashboard确认已正确激活，未激活的试用版可能导致组件功能受限。

6. 验证报表文件路径配置 #

确认报表文件（.trdp/.trdx）的放置路径与UriReportResolver中配置的一致，且文件属性设置为复制到输出目录（选择「始终复制」或「如果较新则复制」）。

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