uni-app 鸿蒙加载远程字体图标报跨域

欢迎到专业群（ uni-app鸿蒙化技术交流群 ） 咨询，群中有相关专业的管理员和群友。

好的，作为 DCloud 官方人员，我对这个 Bug 反馈进行评审。
反馈有效性评审
这个反馈描述了一个在特定平台（鸿蒙）上通过 CSS @font-face 加载远程字体图标时遇到 CORS 跨域错误的典型问题。反馈的整体结构清晰，包含了问题描述、环境信息、代码示例和复现步骤，核心问题是明确的。
不过，反馈在以下几个方面可以进一步完善：

代码示例的完整性：提供的代码示例只包含了 @font-face 的定义，缺少使用该字体图标的 HTML/标签部分。虽然不影响理解，但一份完整的代码片段能让复现路径更清晰。
平台与版本的关联性：反馈中提及的是 uni-app（Vue3），运行平台为鸿蒙。需要特别注意，uni-app 的 Vue3 页面在 App 端（包括鸿蒙）是通过 Webview 渲染的。这个细节对分析问题至关重要。
预期结果的合理性：期望通过 CSS @font-face 加载远程字体并直接显示，这个预期在 Web 开发中是常规操作，但在鸿蒙的 Webview 环境下，其 CORS 策略可能更为严格，因此这个预期需要结合平台特性来考量。

Bug 是否成立的分析
结论：该 Bug 成立，但严格来说，这并非 uni-app 框架的缺陷，而是鸿蒙平台 Webview 的安全策略限制所导致的必然结果。
分析依据如下：

问题本质：错误信息 Access to font… from origin ‘null’ has been blocked by CORS policy 是典型的浏览器/Webview 安全机制。当应用以本地文件协议（file://）加载页面时，其源（origin）为 null，向远程 HTTPS 服务器请求资源（如字体文件）会触发跨域限制。
平台特性：根据华为官方文档 Web页面跨域解决方案 所述，解决这类跨域问题的首选方案是在远程服务器端配置 CORS 响应头。这意味着，从平台设计上，就要求资源提供方明确允许跨域访问。uni-app 作为前端框架，无法绕过操作系统的这一安全机制。
知识库佐证：

通用文档：uni-app 官方文档 字体图标 部分虽然提到支持网络路径字体图标，但同时也强调了小程序等环境有更严格的限制（如必须为 https 且同源）。鸿蒙 Next 作为新兴平台，其 Webview 的行为更接近现代浏览器，安全策略也更严格。
社区案例：在 DCloud 问答社区中，有一个高度相似的问题 (鸿蒙) harmonyOS next 预览 pdf 文件有无解决方案？，同样在鸿蒙 Webview 中加载远程资源时遭遇了 origin ‘null’ 的 CORS 报错。其最终解决方案是由后端接口去除跨域限制。这印证了在鸿蒙 Webview 环境下加载远程资源，必须由服务端解决跨域问题。
华为官方文档：华为开发者文档 如何加载和使用自定义字体 介绍了在鸿蒙原生应用中通过 @ohos.font 注册本地字体文件的方式。这从侧面说明，在鸿蒙生态中，推荐或原生支持的方式是使用本地字体。

解决方案建议
针对你遇到的问题，提供以下几种解决方案，推荐按优先级尝试：

【首选方案】服务端配置 CORS：这是最根本、最推荐的解决方案。你需要联系你的后端或运维同事，在提供字体文件的服务器（例如 xx.xxx-xx）上配置响应头 Access-Control-Allow-Origin。

如果你能控制该服务器，可以将其值设为你的应用源，或设为 *（允许所有源，但可能存在安全风险）。
这是从根源上解决 Web 标准跨域问题的办法。

【备选方案】改用本地字体文件：将字体文件下载下来，放到 uni-app 项目的 static 目录下，然后通过本地路径引用。这种方式性能最好，也没有跨域问题。
@font-face {
font-family: “hua5icon”;
src: url(’~@/static/iconfont.ttf’) format(‘truetype’);
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

【uni-app x 路径】使用 uni.loadFontFace API：如果你使用的是 uni-app x，可以尝试用 JS API 动态加载字体，而非纯 CSS 方式。根据对话知识库中 DCloud 官方人员（OttoJi）的建议，uni-app x 相关问题建议在 HBuilderX 中提一个专门的 bug 单进行跟进。从 uni-app x 的 uni.loadFontFace 文档来看，它支持网络字体，并明确 app-uvue 支持的字体为 ttf 和 otf。

总结
这不是 uni-app 框架的代码错误，而是你遇到了鸿蒙平台严苛的 Webview 安全策略。你需要通过服务端配置 CORS 或改用本地文件的方式来适配这个平台特性。 内容为 AI 生成，仅供参考