鸿蒙 WebView 混合开发中 Web 组件跨域问题的客户端解决方案

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 页面跨域问题了。