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

私はウェブサイト（例：mywebsite.com）を設計していますが、このサイトは別のサイト（anothersite.comなど）からfont-faceフォントを読み込みます。Firefoxでのフォントフォントの読み込みに問題があり、このブログを読みました。

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

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

だからあなたがすることは...フォントファイルフォルダに次の内容のhtaccessファイルを入れます。

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

また、リモートCSSファイルでは、font-face宣言にはfont-fileの完全な絶対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')

}

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

単一のURL：

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

またはコンマで区切られたURLのリスト

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

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

公式のドキュメントによると、あなたが使用するとき、ブラウザはそれを好きではありません

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

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

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

1. Cloud Files UIに移動し、font-awesomeファイルごとにカスタムヘッダー（値*の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は、オブジェクトヘッダーを編集し、コンテンツタイプを変更するための同様の機能を提供している場合があります。

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>

このリンクをチェックしてください...それは間違いなくあなたの問題を解決します。.. Ajax呼び出しクロスドメインGET作るための解決策がたくさんあります CROSS DOMAINのためではなく、POST要求がHERE解かれるが。それを理解するのに3日かかりました。

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

リクエストajaxのfile.phpに、値ヘッダーを設定できます。

<?php header('Access-Control-Allow-Origin: *'); //for all ?>