94

私のアプリケーションはイメージを S3 に保存し、Cloudfront 経由でプロキシします。HTML5 キャンバス メソッド (クロスオリジン ポリシーを持つ) を使用できるように、新しい S3 CORS サポートを使用することに興奮していますが、S3 と Cloudfront を正しく構成できないようです。画像をキャンバス要素に変換しようとすると、まだ「Uncaught Error: SECURITY_ERR: DOM Exception 18」が発生します。

これが私がこれまでに持っているものです：

S3

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

クラウドフロント

起源

Origin Protocol Policy: Match Viewer

HTTP Port: 80

HTTPS Port: 443

行動

Origin: MY_WEBSITE_URL

Object Caching: Use Origin Cache Headers

Forward Cookies: None

Forward Query Strings: Yes

私がここに欠けているものはありますか？

更新:ヘッダーをに変更しようとしました

<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>

この質問に基づいてAmazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

まだ行きません。

更新: リクエストに関する詳細情報

Request
URL:https://d1r5nr1emc2xy5.cloudfront.net/uploaded/BAhbBlsHOgZmSSImMjAxMi8wOS8xMC8xOC81NC80Mi85NC9ncmFzczMuanBnBjoGRVQ/32c0cee8
Request Method:GET
Status Code:200 OK (from cache)

アップデート

たぶん私のリクエストが正しくなかったと思うので、CORSを有効にしてみました

img.crossOrigin = '';

しかし、その後、画像が読み込まれず、次のエラーが表示されます: Cross-Origin Resource Sharing ポリシーにより、クロスオリジンの画像の読み込みが拒否されました。

4

7 に答える 7

6

更新: CloudFront の最近の変更により、これは当てはまりません。ヤッピー！詳細については、他の回答を参照してください。コンテキスト/履歴のためにこれをここに残します。

問題

CloudFront は CORS を 100% サポートしていません。問題は、CloudFront がリクエストに対するレスポンスをキャッシュする方法です。それ以降の同じ URL に対するその他のリクエストは、オリジンに関係なく、キャッシュされたリクエストになります。その重要な部分は、オリジンからの応答ヘッダーが含まれていることです。

CloudFront に何かがキャッシュされる前の最初のリクエストにOrigin: http://example.comは、次のレスポンス ヘッダーがあります。

Access-Control-Allow-Origin: http://example.com

からの 2 番目の要求Origin: https://example.com(HTTP ではなく HTTPS であることに注意してください) にも、次の応答ヘッダーがあります。

Access-Control-Allow-Origin: http://example.com

これは、CloudFront が URL 用にキャッシュしたものだからです。これは無効です。ブラウザー コンソール (少なくとも Chrome では) に CORS 違反メッセージが表示され、問題が発生します。

回避策

推奨される回避策は、オリジンごとに異なる URL を使用することです。秘訣は、オリジンごとに 1 つのキャッシュ レコードが存在するように、異なる一意のクエリ文字列を追加することです。

したがって、URL は次のようになります。

http://.../some.png?http_mysite.com
https://.../some.png?https_mysite.com

この種の機能は機能しますが、クエリ文字列を交換することで、誰でもサイトの機能を低下させることができます. それはありそうですか？おそらくそうではありませんが、この問題のデバッグは非常に面倒です。

適切な回避策は、CORS が完全にサポートされるまで、CORS で CloudFront を使用しないことです。

実際には

CORS に CloudFront を使用する場合は、CORS が機能しない場合に機能する別の方法にフォールバックします。これは常にオプションではありませんが、現在、JavaScript を使用してフォントを動的にロードしています。CloudFront への CORS ベースのリクエストが失敗した場合、フォントへのサーバー側プロキシにフォールバックします (クロスオリジンではありません)。このようにして、CloudFront が何らかの形でフォントの不適切なキャッシュ レコードを取得したとしても、動作を続けます。

于 2014-06-05T19:04:15.323 に答える
2

あなたの問題が何であるか完全にはわかりませんが：

https://forums.aws.amazon.com/thread.jspa?messageID=377513

CORS、S3、およびCloudfrontに関する私の問題のいくつかに答えました。

また、バケット内の一部のアセットは正しい CORS ヘッダーで返され、一部は返されないこともわかりました。アセットを無効にした後、それらはすべて正しいヘッダーで返されました。同じタイプの同じバケットが同時にアップロードされたため、無効にする必要があるものとそうでないものがある理由がわかりません:(

于 2012-09-13T22:17:20.577 に答える
0

CORSエラーの追加の理由として、CloudFront で構成されたHTTP から HTTPS へのリダイレクトが考えられます。

ドキュメントによると、別のオリジンへのリダイレクトは CORS リクエストでは許可されていません。

例として、 HTTP を HTTPS にリダイレクトするための cloudfront ルールがある URL http://example.comにアクセスしようとすると、ブラウザーはhttps ://cloudfront.url を次のように見なすため、CORS エラーが発生します。別の起源。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed

于 2021-03-04T12:23:25.757 に答える