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

我正在devise一个网站（例如mywebsite.com），这个网站从另一个网站（比如anothersite.com）加载字体字体。 我在Firefox中加载字体字体时遇到了问题，我在这个博客上阅读：

Firefox（支持v3.5中的@ font-face）默认情况下不支持跨域字体。 这意味着字体必须从相同的域（和子域）提供，除非您可以向该字体添加“Access-Control-Allow-Origin”标头。

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

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

<FilesMatch "\.(ttf|otf|eot|woff)$"> <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.mysite.com/css/fonts/League_Gothic.eot?') format('eot'), url('http://www.mysite.com/css/fonts/League_Gothic.woff') format('woff'), url('http://www.mysite.com/css/fonts/League_Gothic.ttf') format('truetype'), url('http://www.mysite.com/css/fonts/League_Gothic.svg') }

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

一个URL： 

 Access-Control-Allow-Origin: http://yoursite.com

或用逗号分隔的url列表

Access-Control-Allow-Origin: http://yoursite.com,http://anothersite.com

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

根据官方文档 ，浏览器不喜欢它，当你使用 

 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指令正在做的事情。

接受的答案不适用于我，不幸的是，因为我的网站CSS文件@导入字体CSS文件，这些都存储在Rackspace云文件CDN。

由于Apache头文件从不生成（因为我的CSS不在Apache上），所以我不得不做几件事情：

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

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

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

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

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

检查这个链接..它肯定会解决你的问题..有很多的解决scheme，使跨域GET Ajax调用， 但交叉域的POST请求解决了这里 。 花了我3天才弄明白。

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

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

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