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

Question

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

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

我遇到 CORS 问题是因为:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

我试过这个网站显示的 jQuery:Html5rocks

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

我也用 javascript 尝试过:Javascript

我不知道自己做错了什么

Answer 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>