如何通过 CORS 策略加载字体？

Posted 2023-03-04

【中文标题】如何通过 CORS 策略加载字体？

【英文标题】：How to get through CORS policy to load fonts?

【发布时间】：2017-03-18 10:51:14

【问题描述】：

要访问我的字体，我使用@font-face。

@font-face 
    font-family: 'Brandon Grotesque Regular';
    src: url('http://server/font/brandon_reg-webfont.eot');
    src: url('http://server/font/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://server/font/brandon_reg-webfont.woff2') format('woff2'),
         url('http://server/font/brandon_reg-webfont.woff') format('woff'),
         url('http://server/font/brandon_reg-webfont.ttf') format('truetype'),
         url('http://server/font/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;

很遗憾，我无法访问我的字体，我的请求已被 CORS 政策阻止。

在以下位置访问字体 'http://server/font/brandon_blk-webfont.woff2' 来自原点“http://server.fr”已被 CORS 策略阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:8888” 访问。

所以我编辑了一个 .htaccess

AddType application/vnd.ms-fontobject .eot
AddType font/ .ttf
AddType font/ .eot
AddType font/ .otf
AddType font/ .woff
AddType font/ .woff2
<FilesMatch ".(ttf|otf|eot|woff|woff2)">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

它也没有工作。有什么想法吗？

【问题讨论】：

一些事情：现在是 2016 年，不要再使用“加载每种格式的 webfont”方法了，it's not necessary。其次，为什么要检查mod_headers.c？你知道你的服务器设置：Header set 如果你有 mod_headers 就可以工作，所以如果它不工作，你确定你没有在 apache conf 中禁用 mod_headers 吗？第 1 步是删除除 WOFF 之外的所有内容，简化您的 FilesMatch，并删除 IfModule。然后看看会发生什么。

你是对的，我的 mode_headers 被禁用了。

【参考方案1】：

这是解决方案：

<FilesMatch ".(otf|ttf|eot|woff|woff2)$">
SetEnvIf Origin "^http(s)?://(.+.)?(localhost|yourdomain.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %origin_ise env=origin_is
</FilesMatch>

将其放入服务器上的 .htaccess 文件中，其中放置字体

【讨论】：

你能解释一下每一行的作用吗？ %origin_ise 中的“e”是故意的吗？