web-dev-qa-db-ja.com

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

これらのルールを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を必要とすることです。私はこれをグーグル answer とし、これを私のサーバーディレクティブに追加しました：

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」

構文から外れる可能性のあるアイデアはありますか？ローカルで何を開こうとしないか、何をするかを明示的に追加する必要がありますか？

[〜＃〜] edit [〜＃〜]：問題は、現在2つの異なる場所でサービスを提供していることです。その代わりに、メインの内部で正規表現チェックを実行してから、ヘッダーをフィードする必要があります。

nginxhttp-headers
23
meder omuraliev

わっ！了解しました。私が編集で疑っていたのはかなりのことでした。基本的に、唯一の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 *;
            }
    }
21
meder omuraliev
location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
12
Diego Carrion

すべての資産

これにより、すべてのアセットが正常に動作します。新しい場所を定義する場合は、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";
}
6
Pian0_M4n

別の解決策：すべてのフォントをstatic/fontsなどに入れ、追加します

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
3
user334690