Question

我正在设计一个网站（例如mywebsite.com），这个网站从另一个网站（比如anothersite.com）加载font-face字体。我在Firefox中遇到字体字体加载问题，我在this blog上阅读：

Firefox（支持@ font-face 来自v3.5）不允许跨域默认情况下的字体这意味着字体必须从同一个域提供（和子域），除非你可以添加 “Access-Control-Allow-Origin”标题到字体。

如何将Access-Control-Allow-Origin标头设置为字体？

Answer 1

所以你要做的是......在font files文件夹中放入一个包含以下内容的htaccess文件。

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

同样在你的远程CSS文件中，font-face声明需要font-file的完整绝对URL（本地CSS文件中不需要）：

e.g。

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

这将解决问题。需要注意的一点是，您可以准确指定应允许哪些域访问您的字体。在上面的htaccess中，我已经指定每个人都可以使用"*"访问我的字体，但是您可以将其限制为：

单个网址：

标题集设置Access-Control-Allow-Origin http://example.com

~~或以逗号分隔的URL列表~~

<德尔> Access-Control-Allow-Origin: http://site1.com,http://site2.com

（当前实现中不支持多个值）

Answer 2

根据the official docs，浏览器在您使用

时不喜欢它

Access-Control-Allow-Origin: "*"

如果您还在使用

，请

标题

Access-Control-Allow-Credentials: "true"

头。相反，他们希望你特别允许他们的出身。如果您仍然想要允许所有来源，您可以使用一些简单的Apache魔法来使其工作（确保您已启用mod_headers）：

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

浏览器需要在所有跨域请求上发送Origin标头。如果您接受/计划接受请求，则文档明确声明您需要在Access-Control-Allow-Origin标头中回显此标头。这就是Header指令正在做的事情。

Answer 3

不幸的是，接受的答案并不适合我，因为我的网站CSS文件@import字体CSS文件，这些都存储在Rackspace Cloud Files CDN上。

由于从未生成Apache标头（因为我的CSS不在Apache上），我必须做几件事：

转到Cloud Files用户界面并为每个字体很棒的文件添加自定义标题（Access-Control-Allow-Origin with value *）
将woff和ttf文件的Content-Type分别更改为font / woff和font / ttf

看看你是否可以逃脱＃1，因为第二个需要一些命令行工作。

在＃1中添加自定义标题：

查看文件的云文件容器
向下滚动到文件
点击cog图标
点击修改标题
选择Access-Control-Allow-Origin
添加单个字符＆＃39; *＆＃39; （不含引号）
点击进入
重复其他文件

如果你需要继续并做＃2，那么你需要一个带CURL的命令行

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0

从返回的结果中，提取X-Auth-Token和X-Storage-Url的值

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff

curl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf

当然，只有在您使用Rackspace CDN时，此过程才有效。其他CDN可能提供类似的工具来编辑对象标题和更改内容类型，所以也许你会很幸运（并在这里发布一些额外的信息）。

Answer 4

对于基于Java的应用程序，将其添加到您的web.xml文件中：

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.otf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.eot</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>

Answer 5

检查此链接..这肯定会解决您的问题.. 有很多解决方案可以进行跨域GET Ajax调用 但是在这里解决了对跨域的请求。我花了3天才弄明白。

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

Answer 6

在你的file.php请求ajax中，可以设置值标题。

<?php header('Access-Control-Allow-Origin: *'); //for all ?>

如何添加Access-Control-Allow-Origin标头

6 个答案: