鸿蒙 WebView 本地资源跨域的客户端处理

但 setPathAllowingUniversalAccess 需要的是 resourceDir 对应的路径，而项目里默认并不会自动生成 resfile 目录。也就是说，光靠打包是不够的，目录结构得自己补上。

我是在 src/main/resources 下手动新建了 resfile 文件夹，然后把打包后的 dist 目录，也就是 H5 页面文件，放进去。之后资源读取改成这样：

web({ src:'resource://resfile/dist/index.html#/xxxxxxx', controller: this.webController })

真正关键的一步是设置 setPathAllowingUniversalAccess。这里要先把 src 置空，再用 loadUrl 去加载页面，否则权限和加载顺序会拧在一起，排查时很烦。

// 在设置好 setPathAllowingUniversalAccess 之后，需要将 src 置空，使用 loadUrl 加载页面
Web({ src: "", controller: this.webController })
.onControllerAttached(() => {
    try {
        // 设置允许可以跨域访问的路径列表
        this.webController.setPathAllowingUniversalAccess([
            // 这里获取到 resfile 文件目录，后边拼上自己的 h5 文件
            getContext().resourceDir + "/dist/index.html"
        ])
        this.webController.loadUrl('原页面路径')
    } catch (error) {
        console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
    }
})
.javaScriptAccess(true)
.fileAccess(true)
.domStorageAccess(true)

这里的 resourceDir + "/dist/index.html" 要跟你实际放置的文件路径对应上。路径不对，系统直接不给面子，异常会很明确。

结果

按这个方式处理后，鸿蒙 WebView 场景下的 H5 页面跨域问题就能在客户端侧先解决掉。对我来说，这种方案的价值不在于'优雅'，而在于它足够直接，适合混合开发里先把页面和请求跑稳定。