跨域请求被阻止：站点字体资源加载失败的解决方案咨询

我从外部站点引入了CSS文件，代码如下：

...
<link rel="stylesheet" href="https://sample.com/styles.css">
...

该CSS文件中定义了自定义字体：

...
@font-face{
   font-family:'SomeFont';
   src: url('myfont.ttf') format('truetype');
}
...

字体实际地址为https://sample.com/myfont.ttf，但在HTML中使用font-family:SomeFont;时，浏览器无法加载该字体，默认使用系统字体，同时抛出以下错误：

1- Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sample.com/myfont.ttf. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

2- downloadable font: download failed (font-family: "SomeFont" style:normal weight:400 stretch:100 src index:0): bad URI or cross-site access not allowed source: https://sample.com/myfont.ttf

错误截图：

1. 在字体所在服务器配置CORS响应头 #

这是最根本的解决办法，需要在sample.com服务器上为字体文件（.ttf、.otf、.woff等格式）添加Access-Control-Allow-Origin响应头：

• 允许所有网站访问：设置头为 Access-Control-Allow-Origin: *
• 仅允许指定站点访问：替换为你的域名，比如 Access-Control-Allow-Origin: https://your-domain.com

不同服务器的配置示例：

• Nginx：在配置文件中添加：

location ~* \.(ttf|otf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

• Apache：在.htaccess或站点配置文件中添加：

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

• IIS：在站点的「HTTP响应头」设置中新增Access-Control-Allow-Origin，值设为允许的域名或*

2. 将字体迁移到当前站点同域下 #

如果无法修改外部服务器配置，可将myfont.ttf下载到自己的网站服务器中，修改CSS里的字体路径为相对路径，比如：

@font-face{
   font-family:'SomeFont';
   src: url('/fonts/myfont.ttf') format('truetype');
}

确保字体文件的实际存放路径与代码中的路径一致，即可避免跨域问题。

3. 将字体转为Base64编码嵌入CSS #

把字体文件转换成Base64编码，直接写入CSS的src属性中，无需单独请求字体文件，自然不会触发跨域：

@font-face{
   font-family:'SomeFont';
   src: url(data:font/truetype;base64,【替换为你的字体Base64编码内容】) format('truetype');
}

注意：这种方式会增大CSS文件体积，适合体积较小的字体文件。

4. 辅助检查：确认字体路径正确性 #

虽然当前错误明确指向CORS问题，但也可以核对CSS中url('myfont.ttf')是否准确指向字体实际地址，避免因路径错误导致的加载失败。

内容的提问来源于stack exchange，提问作者seyed Abolfazl Khoshghalb