12

Caman.js を使用して、Amazon S3 から画像を読み込もうとしています。Caman.js は画像効果を生成するための JS ライブラリであり、画像のコピーをキャンバス オブジェクトに作成し、データに対してさまざまなピクセル操作を行うことによって機能します。キャンバスには、そのデータが外部サーバーから送信されたときに JavaScript がピクセル データにアクセスする機能を制限するために、セキュリティの詳細が設定されているようです。 ）。

私はこれまでCORSに遭遇したことがなく、それについて学ぼうとしていますが、これを機能させることができないようです. 私が理解できることから、Chrome に表示されるこのエラーを回避するために:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

Amazon バケットに CORS ファイルを設定する必要があります。私が使用しているCORSファイルは次のとおりです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

これは効果がないようです。これらの CORS ファイルは Amazon によってキャッシュされますか? それとも、すぐに有効になると期待すべきですか? -- 更新: 8 時間後に試してみましたが、まだ機能していないので、キャッシュは問題ではないと思います。

上で指定した CORS ファイルはすべてを許可するように見えますね。CORS と Google で Chrome のドキュメントを調べましたが、良い答えが見つからないようです。以前にこの問題に対処した人はいますか?

ありがとう！ケビン

更新: Amazon への画像リクエストから取得したレスポンス ヘッダーは次のとおりです。

Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2
4

1 に答える 1

16

これは 4 か月前の質問ですが、実用的なソリューションへの参照をここに置くことで、S3、CORS、および HTML キャンバスの問題を取得した他の人を支援したいと思います。

Amazon S3 は、明示的に要求された場合にのみCross-Originヘッダーを送信します ( CORS 仕様を参照)。これは、クライアントが HTTP リクエストで明示的に要求する必要があることを意味します。予想される動作は、クライアントがリクエストの「Origin: host-name」ヘッダー内にホスト名を指定し、サーバーがリソースを特定のオリジン名と共有する必要があるかどうかを確認することです。ここで理解しておくべき重要なことは、クライアントが Web ブラウザーの場合、理由もなくこのヘッダーを送信しないということです。

これがクロスドメイン ajax リクエストの仕組みです。最近、フォントや画像などの他のリソースのサポートが追加されました。

画像: HTML5 は、HTML タグおよび Javascript 内の画像に対する Cross-Origin サポートを追加しました...画像にcrossOrigin属性を使用すると、ブラウザーはリソースを Cross-Origin リソースとして取得します ( Originヘッダーを HTTP 要求に追加します)リンク元の投稿へ。

crossorigin属性は CORS 設定属性です。その目的は、クロスオリジンアクセスを許可するサードパーティ サイトからの画像を canvas で使用できるようにすることです。

MDN で続きを読む

私も同様の問題を取得しました。クライアント側で HTML5 サポートに依存できる場合は、その解決策を使用してください。

于 2013-03-04T15:45:20.093 に答える