制作Forge(APS)自定义可视化时格式选项卡无Visual分区问题

问题描述 #

制作Forge(APS)自定义可视化时，格式选项卡中未显示General分区旁的Visual分区——教程截图显示该分区存在；通过npm start启动JavaScript环境，激活开发者设置后选择开发者可视化组件，但选中报表中的空白可视化框查看格式选项卡时，仅能看到General分区，无法找到用于填写access tokens、GUID和urn的Visual分区。

当前界面：

报错信息 #

Access to fetch at cvSandboxPack.cshtml:1
'https://app.powerbi.com/13.0.22683.73/cvSandboxPack.cshtml?locale=en-US&emCVBundle=1&pbiglobals=1' from origin 'null' has been blocked by
CORS policy: No 'Access-Control-Allow-Origin' header is present on the
requested resource. If an opaque response serves your needs, set the
request's mode to 'no-cors' to fetch the resource with CORS disabled.
visual.ts:146

GET https://app.powerbi.com/13.0.22683.73/cvSandboxPack.cshtml? 
locale=en-US&emCVBundle=1&pbiglobals=1 net::ERR_FAILED 200 (OK)

visual.ts:154  TypeError: Failed to fetch
    at Visual.getAccessToken (<anonymous>:299:36)
    at initializeAuth (envinit.js:604:35)
    at eval (envinit.js:519:13)
    at new Promise (<anonymous>)
    at initializeAuthPromise (envinit.js:518:16)
    at Object.Initializer (envinit.js:764:24)
    at <anonymous>:78:62
    at new Promise (<anonymous>)
    at <anonymous>:78:20
    at async Visual.initializeViewer (<anonymous>:278:13)

排查与解决方法 #

1. 修复Visual分区缺失问题 #

• 检查capabilities.json配置：确认文件中存在objects字段，且已定义Visual相关设置项（如accessToken、guid、urn等）。若配置缺失，补充后重启npm start服务。
• 清除Power BI缓存：关闭Power BI Desktop，删除%localappdata%\Microsoft\Power BI Desktop\Cache下的所有文件，重新打开后加载本地可视化组件。
• 验证开发者模式状态：确保Power BI开发者设置中“启用自定义可视化调试”已勾选，且选中的可视化组件为本地运行的aps-viewer-visual实例。

2. 解决CORS请求失败错误 #

• 改用Power BI Desktop调试：网页版Power BI沙箱会限制跨域请求，使用桌面版加载本地自定义可视化可绕过该限制。
• 调整请求逻辑：修改visual.ts中请求cvSandboxPack.cshtml的代码，适配本地调试环境；或者待Visual分区正常显示后，直接手动输入access tokens等参数，移除不必要的跨域请求。
• 核对端口配置：确认npm start启动的服务端口与Power BI开发者设置中填写的端口一致（默认8080），若冲突可修改pbiviz.json的port字段。

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