使用CDN或外链时,字体文件无法加载,出现CORS跨域问题

编辑于:2023年02月22日

如果网站使用了CDN或者第三方库,可能会遇到字体.woff等静态资源无法加载,Chrome浏览器控制台 报错: has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1. 解决办法

这是出现了跨域问题,只需要给文件加上 HTTP 响应头Access-Control-Allow-Origin就能解决。

1.1 以腾讯CDN为例

在打开 CDN 域名,在高级配置中,找到HTTP响应头配置选项。

新增规则 → 头部参数 Access-Control-Allow-Origin → 头部取值 你的网站域名

1.2 其它云服务方案

诸如腾讯云的云储存,阿里云的 CDN 和对象存储等,在相关功能页面都有 CORS 跨域或 HTTP 响应头的配置选项,根据自己所用的服务,去对应网站找到相关功能进行配置即可。

相关推荐

PHP过滤移除Emoji表情的几种方法

PHP过滤移除Emoji表情的几种方法

虽然 mysql 版本 >=5.5.3 时可以选择 utf8mb4 编码来正常储存 Emoji,但有时因业务需求必须过滤移除 Emoji 表情。在 UTF-8 编码下,英文占用一个字节,中文三个字节,而 Emoji 则是四个字节,利用这些规律,可有以下 ...

暂无评论