鸿蒙webview开发中web内部网络请求访问资源跨域问题，客户端解决方案

项目场景：

在鸿蒙系统的h5混合开发过程中，我们使用web组件进行混合开发，后台并未对跨域问题进行处理，web组件内部发送网络请求出现访问资源跨域问题。

问题描述

访问资源跨域是浏览器在发送网络请求时经常遇到的问题，而鸿蒙的web组件也就相当于一个浏览器，因此在web组件内部发送，也会出现跨域问题，这种问题一般需要再后台解决，但是鸿蒙官方也有提供客户端解决跨域的方案，官网：解决Web组件本地资源跨域问题-管理Web组件的网络安全与隐私-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

原因分析：

为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。因此，在使用Web组件加载本地离线资源的时候，Web组件会拦截file协议和resource协议的跨域访问。可以通过方法二设置一个路径列表，再使用file协议访问该路径列表中的资源，允许跨域访问本地文件。当Web组件无法访问本地跨域资源时，开发者可以在DevTools控制台中看到类似以下报错信息：

官方解决方案描述：

在鸿蒙官网，提供了两种解决方案：

一、为了使Web组件能够成功访问跨域资源，开发者应采用http或https等协议，替代原先使用的file或resource协议进行加载。其中，替代的url域名为自定义构造的仅供个人或者组织使用的域名，以避免与互联网上实际存在的域名产生冲突。同时，开发者需利用Web组件的onInterceptRequest方法，对本地资源进行拦截和相应的替换。

二、

通过设置设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。此外，一旦设置了路径列表，file协议将仅限于访问列表内的资源(此时，fileAccess的行为将会被此接口行为覆盖)。路径列表中的路径必须符合以下任一路径格式：

1.应用文件目录通过Context.filesDir获取，其子目录示例如下：/data/storage/el2/base/files/example/data/storage/el2/base/haps/entry/files/example

2.应用资源目录通过Context.resourceDir获取，其子目录示例如下：/data/storage/el1/bundle/entry/resource/resfile/data/storage/el1/bundle/entry/resource/resfile/example

当路径列表中的任一路径不满足上述条件时，系统将抛出异常码401，并判定路径列表设置失败。若设置的路径列表为空，file协议的可访问范围将遵循fileAccess的规则。

解决方案：

由于本人在开发过程中使用到了第二种解决方案， 在这里本人提供具体的操作步骤，以及指出本人踩过的坑点。

在web组件上本使用的是  resource:// 协议去访问资源,使用如下 X：

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