如何添加Access-Control-Allow-Origin标头 [英] How to add an Access-Control-Allow-Origin header

问题描述

我正在设计一个网站（例如mywebsite.com），这个网站从另一个网站（比如anothersite.com）加载字型字体。我在Firefox中加载字体字体的时候遇到了问题，我读了字体。这意味着字体
必须从相同的域
（和子域）中提供，除非你可以添加一个
访问控制 - 允许源头
字体。

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

$ b $所以你要做的是...在字体文件夹里放一个htaccess文件，里面有下面的文件。

 < FilesMatch\。（ttf | otf | eot | woff）$> 
< IfModule mod_headers.c> 
 Header set Access-Control-Allow-Origin*
  
< / FilesMatch> 
  

也在您的远程CSS文件中，font-face声明需要完整的font-文件（在本地CSS文件中不需要）：

例如

  @ font-face {
 font-family：'LeagueGothicRegular'; 
 src：url（'http://www.mysite.com/css/fonts/League_Gothic.eot？'）格式（'eot'），
 url（'http：//www.mysite （''w /'），
 url（'http://www.mysite.com/css/fonts/League_Gothic.ttf'）格式（'truetype' ），
 url（'http://www.mysite.com/css/fonts/League_Gothic.svg'）
 
} 
  

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

<访问控制 - 允许来源：http：//yoursite.com

单个URL：

  / code> 

或逗号分隔的URL列表

Access-Control-Allow-Origin：http：//yoursite.com,http：//anotherite.com

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

I am designing a website (e.g. mywebsite.com) and this site loads font-face fonts from another site (say anothersite.com). I was having problems with the font face font loading in Firefox and I read on this blog:

Firefox (which supports @font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an "Access-Control-Allow-Origin" header to the font.

How can I set the Access-Control-Allow-Origin header to the font?

解决方案

So what you do is... In the font files folder put an htaccess file with the following in it.

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

also in your remote CSS file, the font-face declaration needs the full absolute URL of the font-file (not needed in local CSS files):

e.g.

@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')

}

That will fix the issue. One thing to note is that you can specify exactly which domains should be allowed to access your font. In the above htaccess I have specified that everyone can access my font with "*" however you can limit it to:

A single URL:

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

Or a comma-delimited list of URLs

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

(Multiple values are not supported in current implementations)

这篇关于如何添加Access-Control-Allow-Origin标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！