项目场景:
在鸿蒙系统的 H5 混合开发过程中,我们使用 Web 组件进行混合开发,后台并未对跨域问题进行处理,Web 组件内部发送网络请求出现访问资源跨域问题。
问题描述
访问资源跨域是浏览器在发送网络请求时经常遇到的问题,而鸿蒙的 Web 组件也就相当于一个浏览器,因此在 Web 组件内部发送,也会出现跨域问题,这种问题一般需要再后台解决,但是鸿蒙官方也有提供客户端解决跨域的方案,官网:解决 Web 组件本地资源跨域问题
原因分析
为了提高安全性,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:// 协议去访问资源,使用如下方式:
Web({ : , : . })


