北京
（原标题：HarmonyOS Web组件开发指南：解决本地资源跨域访问难题）
在HarmonyOS应用开发中，Web组件是构建丰富UI和混合应用的核心利器。然而，许多开发者在将前端工程本地化部署时，常会遭遇一个棘手的“拦路虎”：当使用 file:// 或 resource:// 协议加载本地主页（如 index.html）时，页面内部通过 Ajax 或 Fetch 发起的其他本地资源请求（如 js/script.js）往往会因“跨域”而被 Web 内核拦截，导致资源加载失败。
这一现象的根源在于 Web 内核严格遵循的安全同源策略。为了帮助开发者顺利跨越这一障碍，HarmonyOS 开发者官网发布了《解决 Web 组件本地资源跨域问题》技术文档，详细解析了两种本地资源跨域解决方案，并深度剖析其背后的技术逻辑与安全考量。
一、协议替换与原生拦截
当前 Web 内核对 file:// 和 resource:// 协议施加严格的同源策略限制，导致本地页面无法正常发起跨域资源请求。可通过将受限的本地协议替换为虚拟的 HTTP/HTTPS 协议或自定义协议来规避跨域检查，同时利用原生拦截机制将虚拟请求映射回本地真实资源。
实现步骤：
1. 自定义虚拟域名：构造仅供应用内部使用的域名，可基于 HTTP/HTTPS 协议，也可注册自定义协议，确保不与互联网真实域名冲突。
2. 替换加载协议：将原使用 resource:// 或 file:// 协议的主页 URL，替换为基于自定义域名的 URL，使 Web 内核以标准网络请求的方式加载本地页面。
3. 拦截与资源映射：在原生侧注册请求拦截，当 Web 内核发起对虚拟域名的请求时，依据 URL 路径将其映射至本地工程目录（如 rawfile）中的对应资源文件，读取文件内容并构造响应返回给 Web 内核。
方案 A：onInterceptRequest 拦截
在 Web 组件中重写 onInterceptRequest 回调，拦截对虚拟域名的请求并将 URL 路径映射到本地资源文件，构造 WebResourceResponse 返回。实现简单，适用于无需访问 POST 数据的场景。但该方式无法获取请求中的 POST 数据，响应为同步一次性返回，不支持流式传输。
方案 B：SchemeHandler 拦截（推荐）
通过 WebSchemeHandler 注册对指定协议的拦截回调，在 onRequestStart 中判断请求 URL 并构造响应，在 onRequestStop 中释放资源。该方式支持访问 POST 数据、流式构造响应、Worker 线程执行，并可通过 customizeSchemes（ArkTS）或 OH_ArkWeb_RegisterCustomSchemes（NDK）注册自定义协议及其跨域、CSP 等安全属性，是架构层面最为通用和推荐的方案。
二、基于白名单的路径放行
如果业务场景必须使用file://协议，HarmonyOS提供了 setPathAllowingUniversalAccess 接口来直接放开跨域限制。但需要特别强调的是，放开目录的跨域访问属于高风险操作。因此，该方案严格遵循“最小权限原则”，在放开跨域的同时，应强制收敛整体的文件访问权限。
即一旦设置了路径白名单，file:// 协议将仅限于访问列表内的资源。此时，原有的 fileAccess 属性行为将被此接口直接覆盖。这意味着开发者获得了跨域能力，但失去了对白名单外本地文件的访问权。
这种操作方法需遵循严格的目录准入：白名单路径不能随意指定，必须符合系统规定的应用沙箱目录格式（el1/el2级别），应该仅允许以下四类目录及其子目录：
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/resources/resfile
▪ /data/storage/el1/bundle/entry/resources/resfile/example
3. 应用缓存目录（通过 Context.cacheDir 获取，从 API version 21开始），其子目录示例如下：
▪ /data/storage/el2/base/cache
▪ /data/storage/el2/base/haps/entry/cache/example
▪ 设置的目录路径中，不允许包含 cache/web，否则会抛出异常码401。如果设置的目录路径是 cache，cache/web 也不允许访问。
4. 应用临时目录（通过 Context.tempDir 获取，从 API version 21开始），其子目录示例如下：
▪ /data/storage/el2/base/temp
▪ /data/storage/el2/base/haps/entry/temp/example
当路径列表中的任一路径不满足上述条件时，系统将抛出异常码401，并判定路径列表设置失败。如果路径列表设置为空，file 协议的可访问范围将遵循 fileAccess 规则。
事实上，解决 Web 组件本地资源跨域问题，本质上是在“Web 标准安全机制”与“本地文件加载便利性”之间寻找平衡。理解以上两种方案的底层逻辑与安全边界，将帮助开发者在 HarmonyOS Web 开发中写出更加健壮、安全的代码。
有需要的开发者可以登录 HarmonyOS 开发者官网，通过“指南→应用框架→ArkWeb（方舟 Web）→管理 Web 组件的网络安全与隐私→解决 Web 组件本地资源跨域问题”路径找到目标文档，或点击下方“阅读原文”了解详情。
