nginxが@ font-face形式をサポートし、access-control-allow-originを許可するにはどうすればよいですか?


21

これらのルールを追加しましたmime.types

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

現在、Content-Typeヘッダーは、それらごとに適切に設定されています。私の唯一の問題は、FirefoxがAccess-Control-Allow-Originを必要とすることです。私はこの答えをグーグルで検索し、これを私のサーバーディレクティブに追加しました:

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

しかし、現在、私のフォントはまったく提供されていません。

代わりerror.logに、ローカルファイルシステムでそれらを開こうとしていると報告します。

2010/10/02 22:20:21 [エラー] 1641#0:* 15 open() "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff"が失敗しました(2:そのようなファイルまたはディレクトリはありません) 、クライアント:69.164.216.142、サーバー:static.arounds.org、リクエスト: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1"、ホスト: "static.arounds.org"

構文で何がうまくいかない可能性がありますか?ローカルで開くことを試みない、または何をするのかというルールを明示的に追加する必要がありますか?

編集:私は問題は私が今2つの異なる場所にサービスを提供していることだと思う。その代わりに、メインの内部で正規表現チェックを行ってからヘッダーをフィードする必要があります。


「otf」をルールに追加することもできます
ケビンカンピオン

回答:


18

すごい!それを手に入れました。編集で疑ったことはほとんどありました。基本的にlocation {}、代替ファイルを作成する代わりに、自分のソールで正規表現のファイル名チェックを行う必要がありました。

    location / { 
            root /www/site.org/public/;
            index index.html;

            if ($request_filename ~* ^.*?/([^/]*?)$)
            {
                set $filename $1; 
            }

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

8
いいえ、あなたは本当にしません。コンテキストの継承について学ぶ必要があります。サーバーブロックでサイトルートディレクティブを指定すると、すべてのロケーションブロックで使用可能になります。これを読むことをお勧めします:blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

誰かが実際に#nginxチャンネルでそれを言ったが、答えを更新するのを忘れていた。
メダーオムラリエフ

12
location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

3
注:指定された解決策が機能しない場合は、こちらこちらをお読みください。それは啓発的であり、それが機能していない理由を見つけるかもしれません。
its_me

フォントURLにクエリ文字列が含まれているため、これは機能しません
-Broncha

私のための作品...
マナンシャー

ヒント:クラウドフレアでそれらをパージする場合!!
shakee93

5

すべての資産

これにより、すべてのアセットが正常に機能します。root新しい場所を定義する場合は追加できます

location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

1
うん、

3

別の解決策:すべてのフォントを、たとえば、static/fontsに追加し、追加します

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.