Question

所以我试图用firefox修复@ font-face问题，我正在使用rails4 / ruby2 所以我尝试将我的.htaccess放在/ public文件夹中，并在/ public文件夹中提供字体文件，但请求仍然被阻止，有人可以帮忙解决这个问题吗？

.htaccess文件位于/ public文件夹中：

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

Answer 1

在这里，实际上需要自定义CORS配置才能正确显示字体。以下是您需要执行此操作的代码。

.htaccess或httpd.conf代码

可以使用.htaccess文件或httpd.conf文件放置代码：

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

这将设置Access-Control-Allow-Origin CORS配置以允许从所有域中提取。如果要仅为特定域提供字体，请使用逗号列出特定域。在浏览器喜欢一种类型的情况下，您希望适当地提供所有字体类型。

要确保标题设置正确，您可以使用curl实用程序进行检查：

$ curl -I https://some.cdn.otherdomain.net/media/fonts/somefont.ttf

# Result
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Content-Type: text/plain; charset=UTF-8
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Cache-Control: max-age=604795
Expires: Wed, 19 Jun 2013 16:22:58 GMT
Date: Wed, 12 Jun 2013 16:23:03 GMT
Connection: keep-alive

如果您在回复中看到Access-Control-Allow-Origin: *，那么您就是金色的！

Bootstrap CDN使用了同样的策略，所以你知道它很好！

这里有一些与您的问题相关的更有用的链接：

Answer 2

我找到了修复：

使用nginx时，只需在flie中添加标题：files/roles/ads/usr/local/nginx/conf/includes/apps.conf

此代码允许路线：

server {
      listen 80;

      include includes/environment.conf;

      location /my-page-url/ {
             rewrite /my-page-url/(.*) /$1 break;
             add_header Access-Control-Allow-Origin *;
      }
}

Firefox使用rails阻止font-face跨域请求

2 个答案: