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

Question

我正在设计一个网站(例如mywebsite.com),这个网站从另一个网站(比如anothersite.com)加载font-face字体.我在Firefox中遇到字体字体加载问题,我在这个博客上看到:

Firefox(支持v3.5中的@ font-face)默认情况下不允许跨域字体.这意味着必须从同一域(和子域)提供字体,除非您可以向字体添加"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文件中不需要):

例如

@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

根据官方文档,浏览器在您使用时不喜欢它

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

对于基于 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 4

不幸的是,接受的答案对我不起作用,因为我的网站CSS文件@import字体CSS文件,这些都存储在Rackspace Cloud Files CDN上.

由于从不生成Apache头文件(因为我的CSS不在Apache上),所以我必须做几件事:

1. 转到Cloud Files UI并为每个字体很棒的文件添加一个自定义标题(Access-Control-Allow-Origin with value*)
2. 将woff和ttf文件的Content-Type分别更改为font/woff和font/ttf

看看你是否可以逃脱#1,因为第二个需要一些命令行工作.

要在#1中添加自定义标头:

• 查看该文件的云文件容器
• 向下滚动到文件
• 单击cog图标
• 单击编辑标题
• 选择Access-Control-Allow-Origin
• 添加单个字符'*'(不带引号)
• 打进去
• 重复其他文件

如果你需要继续并做#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可能提供类似的功能来编辑对象标题和更改内容类型,所以也许你会很幸运(并在这里发布一些额外的信息).