巷子

发布：2026-06-11 14:07
更新：2026-06-11 20:33
阅读：130

【报Bug】鸿蒙加载远程字体图标，报跨域

分类：鸿蒙Next

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： mac26

HBuilderX类型：正式

HBuilderX版本号： 5.07

手机系统： HarmonyOS NEXT

手机系统版本号： HarmonyOS 6.0.0

手机厂商：华为

手机机型： nova14

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

@font-face {
font-family: "hua5icon";
src:url('https://xx.xxx-xx/iconfont.woff2?t=1781155361206') format('woff2'),
url('https://xx.xxx-xx/iconfont.woff?t=1781155361206') format('woff'),
url('https://xx.xxx-xx/iconfont.ttf?t=1781155361206') format('truetype');
}

操作步骤：

css 图标远程请求
@font-face {
font-family: "hua5icon";
src:url('https://xx.xxx-xx/iconfont.woff2?t=1781155361206') format('woff2'),
url('https://xx.xxx-xx/iconfont.woff?t=1781155361206') format('woff'),
url('https://xx.xxx-xx/iconfont.ttf?t=1781155361206') format('truetype');
}
运行到鸿蒙app

预期结果：

显示字体图标

实际结果：

没有显示字体图标，且报 Access to font at 'https://xx.xxx-xx/iconfont.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

bug描述：

鸿蒙，css加载远程字体报跨域
@font-face {
font-family: "hua5icon";
src:url('https://xx.xxx-xx/iconfont.woff2?t=1781155361206') format('woff2'),
url('https://xx.xxx-xx/iconfont.woff?t=1781155361206') format('woff'),
url('https://xx.xxx-xx/iconfont.ttf?t=1781155361206') format('truetype');
}

Access to font at 'https://xx.xxx-xx/iconfont.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2026-06-11 14:07 负责人:无分享

2 个回复

Ask小助手

欢迎到专业群（ 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 生成，仅供参考

DCloud_UNI_yuhe

hello , 请提供一个完整的可以复现的测试项目

2026-06-11 20:33 分享

要回复问题请先登录或注册

【报Bug】鸿蒙加载远程字体图标，报跨域

示例代码： @font-face { font-family: "hua5icon"; src:url('https://xx.xxx-xx/iconfont.woff2?t=1781155361206') format('woff2'), url('https://xx.xxx-xx/iconfont.woff?t=1781155361206') format('woff'), url('https://xx.xxx-xx/iconfont.ttf?t=1781155361206') format('truetype'); }

预期结果： 显示字体图标

实际结果： 没有显示字体图标，且报 Access to font at 'https://xx.xxx-xx/iconfont.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

示例代码：

@font-face {
font-family: "hua5icon";
src:url('https://xx.xxx-xx/iconfont.woff2?t=1781155361206') format('woff2'),
url('https://xx.xxx-xx/iconfont.woff?t=1781155361206') format('woff'),
url('https://xx.xxx-xx/iconfont.ttf?t=1781155361206') format('truetype');
}

预期结果：

显示字体图标

实际结果：

没有显示字体图标，且报 Access to font at 'https://xx.xxx-xx/iconfont.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.