web-dev-qa-db-ja.com

Access-Control-Allow-Originヘッダーを追加する方法

私はウェブサイト（例：mywebsite.com）を設計しており、このサイトは別のサイト（たとえばanothersite.com）からフォントフェースフォントをロードします。 Firefoxでのフォントフェースフォントの読み込みに問題があり、 このブログ を読みました。

Firefox（v3.5の@ font-faceをサポート）は、デフォルトでクロスドメインフォントを許可しません。つまり、「Access-Control-Allow-Origin」ヘッダーをフォントに追加できない限り、フォントは同じドメイン（およびサブドメイン）から提供される必要があります。

Access-Control-Allow-Originヘッダーをフォントに設定するにはどうすればよいですか？

headercorsfont-face
93
Ash

だからあなたがすることは...フォントファイルフォルダに、以下を含むhtaccessファイルを入れてください。

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

リモートCSSファイルでも、font-face宣言にはフォントファイルの完全な絶対URLが必要です（ローカルCSSファイルでは必要ありません）：

例えば.

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

これで問題が修正されます。注意すべきことは、フォントへのアクセスを許可するドメインを正確に指定できることです。上記のhtaccessでは、誰でも"*"で私のフォントにアクセスできるように指定していますが、次のように制限できます：

単一のURL：

ヘッダーセットAccess-Control-Allow-Origin http://example.com

または、URLのコンマ区切りリスト

Access-Control-Allow-Origin: http://site1.com,http://site2.com

（複数の値は現在の実装ではサポートされていません）

155
Ash

公式ドキュメント によると、ブラウザは

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ディレクティブが行っていることです。

21
laughingbovine

私のサイトのCSSファイルはフォントCSSファイルを@importし、これらはすべてRackspace Cloud Files CDNに保存されているため、受け入れられた回答は残念ながら機能しません。

Apacheヘッダーは生成されないため（私のCSSはApache上にないため）、いくつかのことをしなければなりませんでした。

  1. クラウドファイルUIに移動し、フォントが素晴らしいファイルごとにカスタムヘッダー（値が*のAccess-Control-Allow-Origin）を追加します
  2. WoffおよびttfファイルのContent-Typeをそれぞれfont/woffおよびfont/ttfに変更します

2番目のコマンドでは少しコマンドラインの作業が必要になるため、＃1だけで解決できるかどうかを確認します。

＃1にカスタムヘッダーを追加するには：

  • ファイルのクラウドファイルコンテナーを表示する
  • ファイルまでスクロールダウンします
  • 歯車アイコンをクリックします
  • [ヘッダーの編集]をクリックします
  • access-Control-Allow-Originを選択します
  • 単一文字「*」を追加します（引用符なし）
  • enterキーを押します
  • 他のファイルについて繰り返します

続行して＃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は、オブジェクトヘッダーを編集し、コンテンツタイプを変更するための同様の機能を提供する可能性があります。

5
Phil

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>
3
Neon Sun

このリンクを確認してください。それは間違いなくあなたの問題を解決します。クロスドメインGET Ajax呼び出しを行うための多くのソリューションがありますしかしPOSTクロスドメインのリクエストISここで解決しました。それを理解するのに3日かかりました。

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

2
user2440156

Request ajaxのfile.phpで、値ヘッダーを設定できます。

<?php header('Access-Control-Allow-Origin: *'); //for all ?>
1
Santos L. Victor