web-dev-qa-db-ja.com

AWS S3、CloudFront、ウェブフォントCORSエラー

2つのウェブサイトについて、以前のCDNからCloudFrontに移動しました。最初の1つは正常に動作していますが、DigitalOceanで同じスナップショットを使用して2番目のサイトを作成し、ここで取得しています

Originから ' http://CLOUDFRONT_HOSTNAME.cloudfront.net/wp-content/themes/Newspaper/images/icons/newspaper.woff?14 'にあるフォントへのアクセス ' http：/ /www.example.com 'はCORSポリシーによってブロックされています：要求されたリソースに' Access-Control-Allow-Origin 'ヘッダーがありません。したがって、オリジン ' http://www.example.com 'はアクセスを許可されません。

私はnginxにヘッダーを追加するなど、オンラインで利用可能なすべての可能な解決策を試しました。

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

次に、S3でプライバシーを更新します

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

ソリューションのほとんどは、他のserverfaultやstackoverflowソリューションを含むさまざまなサイトでこれです。 CloudFrontのフォントファイルも無効にしていますが、運が悪い:(

誰かが私に問題の可能性を教えてくれますか？ WPのW3 Total Cacheプラグインを介してCloudFrontに接続しました。

[〜＃〜]更新[〜＃〜]

1。ホワイトリストヘッダー

Whitelist Headers

2。ファイルを無効にしました

Invalidated the files

  1. リクエストとレスポンス

Request & Response

よろしくお願いします

アリフ

nginxamazon-web-servicesamazon-s3cdnamazon-cloudfront
2
Ariful Haque

フォントのAuthorizationリクエストでGETヘッダーを送信してもよろしいですか？

そうでない場合は、S3 CORSポリシーの変更

<AllowedHeader>Authorization</AllowedHeader>

に

<AllowedHeader>*</AllowedHeader>。

この小さなミスが私を一ヶ月悩ませた。

2
phegde

今日、これを探していましたが、私のシナリオで有効な答えを見つけることができませんでした。

wordpressを使用しており、Amazon Cloudfrontでs3バケットベースのOrigin Push cdnを使用しています。ただし、フォントファイルでCORSのエラーが発生していました。

エラーは言った：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://–domain–.cloudfront.net/wp-content/themes/Extra/fonts/ET-Extra.ttf. (Reason: CORS header ‘Access-Control_Allow-Origin’ missing).

解決策は、s3バケットからCORS権限を設定することでした。しかし、デフォルトのものではありません。私はそれらを次のように変更しました：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>https://www.domain-here.com</AllowedOrigin>
<AllowedOrigin>http://domain-here.com</AllowedOrigin>
<AllowedOrigin>https://domain-here.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
</CORSRule>
</CORSConfiguration>

Domain-hereを自分のドメイン名に変更してください。

また、必要に応じて、キャッシュをクリアするか、問題を引き起こしていたファイルを無効にすることを忘れないでください。

このチュートリアルも参考にしてください： https://nabtron.com/fix-access-control-allow-Origin-missing/

お役に立てば幸いです。

2
Nabeel Khan

@Ariful Haque以下のコードを.htaccessファイルに追加してください。それはあなたを助けるでしょう。

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>
0
S.Sandeeptha

AWSコンソール-CloudFront-ディストリビューション編集動作で、Fordwardヘッダーでホワイトリストを設定し、ホワイトリストヘッダーからOriginを追加します。

0
drsromero