鸿蒙 WebView 混合开发中 Web 内部网络请求跨域问题的客户端解决方案

在 Web 组件上原本使用的是 resource:// 协议去访问资源，代码如下：

Web({ src: 'resource://rawfile/dist/index.html#/xxxx', controller: this.webController })

然而 setPathAllowingUniversalAccess 属性需要读取的是 /data/storage/el1/bundle/entry/resource/resfile 目录下的文件，使用 Context.resourceDir 获取到的路径可能为空。

原来是在项目创建时并不会自动生成 resfile 文件夹，需要我们手动创建。在项目的 src/main/resources 下新建文件夹：resfile。

将打包好的 dist 文件，也就是 H5 页面文件，放在 resfile 文件夹下面。通过以下方法读取文件：

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

做好以上步骤之后，就来到了解决跨域最为关键的点：设置 setPathAllowingUniversalAccess，这里需要指定解除跨域的文件。

// 在设置好 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)

至此即成功使用官方的第二种方法在客户端解决鸿蒙+H5 混合开发中的 H5 页面跨域问题。