如何在没有 CORS 问题的情况下从外部域获取 ttf

Posted 2023-03-04

【中文标题】如何在没有 CORS 问题的情况下从外部域获取 ttf

【英文标题】：How to get ttf from external domain without CORS problems

【发布时间】：2018-07-04 14:45:53

【问题描述】：

我正在尝试从外部网站获取 .ttf 以在我的 Web 应用程序中使用。当我以这种方式尝试时：

@font-face 
  font-family: 'font';
  src: url('http://xxx.xyz/resources/tipografias/font.ttf') format('truetype');

我遇到了 CORS 问题，原因是：

请求中没有“Access-Control-Allow-Origin”标头 资源。

我已尝试使用该网站显示的 jQuery：html5rocks

我也尝试过使用用于 CORS 的 tomcat 过滤器：CORS filter

我也尝试过使用 javascript：Javascript

我不知道我做错了什么

【问题讨论】：

如果您无法控制该域，则无法控制。我建议下载 TTF 文件（假设您拥有该文件的权限），然后将其包含在您的网站本地

【参考方案1】：

如果您控制外部网站并使用htaccess，您可以使用以下代码允许其他网站加载您的字体：

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

如果您不控制外部网站，则无法绕过CORS 政策。

---

我相信以下内容应该适用于您的 web.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*"/>
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

【讨论】：

我可以控制外部网站。我必须将这些代码行放在哪里？

在网站根目录下的.htaccess 文件中或包含字体文件@DMC19 的某个子目录中。

我正在研究如何按照您在我的 web.xml 中提出的建议进行操作，因为我没有 .htaccess 文件，我必须在 web.xml 中配置它

查看我的编辑@DMC19；我相信它应该适合你。

我已允许访问外部网络，一切正常，谢谢

【参考方案2】：

您无法绕过这一点 - 服务器不希望您访问该字体。正如其他人所说，您可以只需下载字体文件并在本地提供。但这很可能被视为窃取。根据字体的不同，它可能是一种特别许可的字体。

如果这是一家“字体工厂”（一家设计和许可字体的公司），那么他们可能只允许获得许可的网站访问字体文件（通过检查您的浏览器发送的 Origin 请求标头是否在他们的列表中允许的网站）。

旁注 - CORS 基本上是专门为阻止人们从字体工厂下载字体而发明的。