Harmony 鸿蒙应用开发之解决 Web 组件加载本地资源跨域问题
内容提要
本文讨论了在Harmony鸿蒙应用开发中解决Web组件加载本地资源的跨域问题。通过使用$rawfile方法加载本地HTML页面，并利用onInterceptRequest拦截请求，可以有效处理跨域错误。文章提供了代码示例，展示了如何配置Web视图和设置响应数据及MIME类型，以确保静态资源如图片、JS和CSS能够正确加载。
延伸解读
跨域问题的根源
文章指出，使用$rawfile加载本地HTML时，若HTML引用同级目录下的图片、JS、CSS等静态资源，会触发CORS错误。原因是这些资源的URL以resource://开头，而Web组件没有针对该协议的跨域处理策略。错误信息明确提示只支持http、arkweb、data等协议。理解这一点有助于开发者定位问题，而非盲目尝试其他方案。
拦截请求的解决思路
作者提出通过onInterceptRequest拦截请求来绕过跨域限制。具体做法是使用一个虚拟域名（如http://myapp.local）作为页面src，在拦截回调中判断请求URL是否以该域名开头，然后提取相对路径，用$rawfile读取本地资源，并设置响应数据、编码、MIME类型和状态码。这样Web组件会认为资源来自http协议，从而避免跨域错误。
实现中的关键细节
代码示例展示了几个重要细节：需要为不同扩展名设置对应的MIME类型（如.html对应text/html，.css对应text/css等），否则资源可能无法正确解析；响应状态码需设为200并附带OK消息；对于未覆盖的静态资源类型，需手动补充MIME判断逻辑。此外，开启Web调试模式有助于排查问题。这些细节直接影响资源能否正常加载。
适用性与注意事项
作者明确表示该方法不一定是最佳实践，但确实能解决跨域问题。它适用于本地HTML引用同级静态资源的场景，但需要开发者自行维护MIME类型映射，且虚拟域名的使用可能带来额外管理成本。读者应评估是否有更优方案，并注意拦截逻辑需覆盖所有用到的资源类型，避免遗漏导致加载失败。
Q&A
如何在Harmony鸿蒙应用中加载本地HTML页面？
可以通过$rawfile方法加载本地HTML页面，例如使用Index.ets1Web({ src: $rawfile('local.html'), controller: this.webviewController })。
在加载本地资源时遇到跨域问题，如何解决？
可以通过onInterceptRequest拦截请求来解决跨域问题，尽管这不是最佳实践。
为什么在加载本地资源时会出现跨域错误？
因为本地资源的URL以resource://开头，Web组件没有处理这种类型URL的跨域策略。
如何配置Web视图以确保静态资源正确加载？
需要根据请求的相对路径设置相应的MIME类型和响应状态码，以确保资源能够被正确返回。
在onInterceptRequest中如何处理请求？
可以获取请求的URL，判断是否以本地URL开头，然后根据相对路径设置响应数据和MIME类型。
在Harmony鸿蒙应用中，如何设置静态资源的MIME类型？
可以通过判断文件扩展名来设置MIME类型，例如.html对应text/html，.css对应text/css等。
