WordPress自定义字体首次加载出现CORS跨域错误如何修复？

问题报错详情 #

Cross-Origin Request Blocked: 同源策略不允许读取位于https://karmel.stefvanoevelen.com//wp-content/themes/blankslate/fonts/din_alternate_bold-webfont.woff2的远程资源。（原因：CORS头‘Access-Control-Allow-Origin’缺失）。
可下载字体：下载失败（font-family: "Din-bold" style:normal weight:700 stretch:100 src index:1）：URI错误或不允许跨站访问，来源：https://karmel.stefvanoevelen.com//wp-content/themes/blankslate/fonts/din_alternate_bold-webfont.woff2

根因说明 #

首次加载页面时字体资源未被浏览器缓存，请求跨域资源时缺少必要的CORS响应头触发同源策略拦截；二次加载时资源直接从浏览器本地缓存读取，跳过了跨域校验流程，因此不再报错。

解决方案 #

方案1：服务端配置CORS响应头（最稳妥，推荐） #

根据你使用的服务器类型选择对应配置：

• Nginx 配置：在站点配置文件的server块中添加以下规则

location ~* \.(woff|woff2|ttf|otf|eot)$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, OPTIONS";
    add_header Access-Control-Allow-Headers "Content-Type";
    expires 365d;
}

配置完成后执行nginx -s reload重载配置生效。

• Apache 配置：在站点根目录的.htaccess文件中添加以下规则

<FilesMatch "\.(woff|woff2|ttf|otf|eot)$">
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, OPTIONS"
</FilesMatch>

修改完成后重启Apache服务生效。

方案2：字体资源本地化 #

如果字体资源和站点主域不一致，可以将字体文件下载到站点当前主题的fonts目录下，修改CSS中@font-face的src路径为站点相对路径，避免跨域请求。
示例修改：

@font-face {
    font-family: "Din-bold";
    src: url("./fonts/din_alternate_bold-webfont.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

方案3：WordPress专用配置 #

如果没有服务器配置权限，可以在WordPress主题的functions.php文件中添加以下代码添加响应头

add_action('init', function() {
    if (preg_match('/\.(woff|woff2|ttf|otf|eot)$/', $_SERVER['REQUEST_URI'])) {
        header("Access-Control-Allow-Origin: *");
    }
});

验证方法 #

配置完成后清空浏览器缓存，首次访问页面查看控制台是否还存在CORS报错即可。

内容的提问来源于stack exchange，提问作者vanoevelenstef