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

Question

我正在设计一个网站（例如 mywebsite.example），该网站从另一个网站（例如 anothersite.example）加载 font-face 字体。我在 Firefox 中加载字体时遇到问题，我阅读了 此博客：

Firefox（支持@font-face 从v3.5开始）不允许跨域 默认字体。这意味着字体 必须从同一域提供 （和子域）除非您可以添加 “Access-Control-Allow-Origin”标头 到字体。

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

Answer 1

所以你要做的是......在字体文件文件夹中放置一个 htaccess 文件，其中包含以下内容。

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

同样在远程CSS文件中，font-face声明需要字体文件的完整绝对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 中，我已指定每个人都可以使用 "*" 访问我的字体，但是您可以将其限制为：

单个 URL：

标头设置 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

不幸的是，接受的答案对我不起作用，因为我的网站 CSS 文件 @import 字体 CSS 文件，并且这些文件都存储在 Rackspace 云文件 CDN 上。

由于 Apache 标头永远不会生成（因为我的 CSS 不在 Apache 上），因此我必须执行以下操作：

1. 转到 Cloud Files UI 并为每种字体添加自定义标头（带有值 * 的 Access-Control-Allow-Origin） -awesome file
2. 将 woff 和 ttf 文件的 Content-Type 分别更改为 font/woff 和 font/ttf

看看是否可以只使用 #1，因为第二个需要一些命令行工作。

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

• 查看文件的云文件容器，
• 向下滚动到文件，
• 单击齿轮图标
• ，单击编辑标头，
• 选择 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 可能会提供类似的工具来编辑对象标头和更改内容类型，所以也许您会很幸运（并在此处发布一些额外信息）。

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

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

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