web-dev-qa-db-ja.com

CloudfrontキャッシュオブジェクトにAccess-Control-Allow-Originを設定する

" 不正なURIまたはクロスサイトアクセスは許可されていません "の問題が原因で、Cloudfrontを介して提供されるフォントがFirefoxで壊れています。これを修正するには、「Access-Control-Allow-Origin」ヘッダーをワイルドカードまたはソースドメインに設定する必要があることを理解しています。

私が抱えている問題は、CloudfrontがOriginからのヘッダーを受け入れていないようです。

たとえば、サーバーにpingを実行してフォントを取得すると、次のようなヘッダーが表示されます。

curl -I -s "https://mysite.com/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 29 Jan 2014 16:03:03 GMT
Content-Type: application/x-font-ttf
Content-Length: 44992
Last-Modified: Tue, 28 Jan 2014 22:21:41 GMT
Connection: keep-alive
ETag: "52e82d75-afc0"
Expires: Thu, 29 Jan 2015 16:03:03 GMT
Cache-Control: max-age=31536000
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3600
Accept-Ranges: bytes

この応答はすべて問題ありません。ただし、同じリソースのCloudfrontにpingすると、次のようになります。

curl -I -s "https://ds6dj5kp03o39.cloudfront.net/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 44992
Connection: keep-alive
Date: Wed, 29 Jan 2014 16:22:30 GMT
Server: Apache/2.2.16 (Debian) mod_ssl/2.2.16 OpenSSL/0.9.8o
Last-Modified: Wed, 22 Jan 2014 02:44:45 GMT
ETag: "5d633-afc0-4f0861b87a140"
Accept-Ranges: bytes
Cache-Control: max-age=3600
Expires: Wed, 29 Jan 2014 17:22:30 GMT
X-Cache: Miss from cloudfront
Via: 1.1 850e11212c3f83bfb138469e9b3b7718.cloudfront.net (CloudFront)
X-Amz-Cf-Id: M4qkj9FwjdAUW91U4WeZzxEI0m7vOmiQvryS55WwoeU5Ks11IC71ig==

Originヘッダーはすべて完全に無視されているようです。私の質問は、どのようにしてCloudfrontがアセットヘッダー、特に重要な「Access-Control-Allow-Origin」ヘッダーを受け入れるようにするのですか？

助けてくれてありがとう！

corscdnamazon-cloudfront
14
tollmanz

これに後日アクセスする場合、カスタムOriginでこの問題が発生し、IS Access-Control-Allow-Originヘッダーが既に正しく提供されている場合は、次の2つを確認または試しました。 ：

  1. NginxまたはApacheの構成に引用符で囲まれた*があるかどうかを確認し、含まれている場合は削除してみてください。
  2. Woffおよびttfファイルに正しいコンテンツタイプを渡していることを確認してください。これは私がこのテーマで見つけた最も速いリンクでした- https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

Apache

フォントファイルに正しいMIMEタイプを設定するには、次の行をconfigに追加します。

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

設定を編集できない場合は、プロジェクトを含むフォルダーに.htaccessファイルを作成し、そこに行を追加します。

CORSヘッダーの場合、以下のコードを追加します。

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

これらの変更を行ったらservice Apache2 restartを実行する必要があります。エラーInvalid command 'Header'を受け取った場合は、a2enmod headersで実行できるApacheでmod_headerモジュールを有効にしていないことを意味します

nginx

デフォルトでは、nginxにはフォントのデフォルトのMIMEタイプがなく、.eotファイルのMIMIタイプが間違っています。 configsのあるフォルダーに移動し、mimeタイプが汚染されている場所を見つけます。通常、それはmimes.confファイルにあります。

.eotを検索し、それを文字列化します。以下に文字列を追加します。

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

CORSヘッダーの場合、vhost設定に次のようなものを追加します

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

デフォルト設定では、CloudFrontはヘッダーを検査したり、それらの値をキャッシュしたりしません。考えられる原因は、リソースが「Origin」ヘッダーなしで最初に要求されているため、S3が応答としてCORSヘッダーを提供していないことです。応答はキャッシュされ、後でクロスオリジンリクエストを行うと、キャッシュされた応答は応答なしで提供されます。

OriginヘッダーをS3に転送し、さまざまなヘッダー値に対するさまざまな応答をキャッシュするようにCloudFrontを構成できます。これにより、CloudFrontは必要に応じてCORSヘッダーをキャッシュします。 http://docs.aws.Amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors を参照してください。

7
Alex

あなたがしたことは正しいですが、CloudFrontは結果をキャッシュするので、古いバージョンのキャッシュを取得しています。あなたはこれをヘッダーで見ることができます：あなたのサイトから：

最終変更日：2014年1月28日火曜日22:21:41 GMT

クラウドフロントから：

最終変更日：2014年1月22日水曜日02:44:45 GMT

今、それを再び機能させる方法：

a）オブジェクトが期限切れになるのを待ってから、再度リクエストします。 CloudFrontはそれを更新します。

b）Amazon aws console> cloudfront> distribution> Invalidationsを使用してオブジェクトを無効化します。これの使用方法の詳細については、 http://docs.aws.Amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html を参照してください

c）名前を変更するか、ファイルのバージョン管理された名前の使用を開始します。 ProximaNova-Reg-webfont_2.ttf

5
Paulo Cunha

CoRSヘッダーを動的に評価するためのバケットの明示的な構成があります。

  1. AWS CORSドキュメント を参照してください
  2. また、 詳細な説明 の使用法

CORSヘッダーを設定しようとしたり、CFやS3に設定したりすると、キャッシュモデルが壊れるため、破棄されます。

3
Joseph Lust