10

次のように S3 バケットに CORS をセットアップします。

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

AWS コンソールのスクリーンショットは次のとおりです。

色泥棒のJavaScript を同じドメインでホストされている画像に向けると、すべてが期待どおりに機能しますが、S3 バケット内のアセットを指すと、ローカルホストからスクリプトを実行するかどうかに関係なく、lvh.me (どのポイントを指すか) 127.0.0.1 に)、または実際のインターウェブから、Chrome 22 で次のようなエラーが発生します。

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

そしてこれはFirefox 15で：

SecurityError: The operation is insecure.

Google Chrome Network Inspector のヘッダーは次のようになります。

Request URL:https://s3.amazonaws.com/assets-zeke.heroku.com/addons-zeke.heroku.com/catalogs/58/original.png
Request Method:GET
Status Code:304 Not Modified

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:s3.amazonaws.com
If-Modified-Since:Tue, 09 Oct 2012 22:52:57 GMT
If-None-Match:"6de1a52294934c5e288894b84100d99b"
Referer:http://localhost:5000/marketplace/addons/sendgrid/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Response Headers
HTTP/1.1 304 Not Modified
x-amz-id-2: qGvoGlvpKeSSzelanWsIPDF3zd5wQzHTr27NZoUbhNqAM1QzmKcWHnTqIkKVxF/m
x-amz-request-id: FD24FB8CA244E327
Date: Wed, 10 Oct 2012 05:20:53 GMT
Last-Modified: Tue, 09 Oct 2012 22:52:57 GMT
ETag: "6de1a52294934c5e288894b84100d99b"
Server: AmazonS3

{bucket}.s3.amazonaws.comそして、バケット名からURL 構造を変更 (およびピリオドを削除) した後のヘッダーは次のようになります。

Request URL:http://assets-zeke.s3.amazonaws.com/addons-zeke.heroku.com/catalogs/58/original.png
Request Method:GET
Status Code:200 OK
Request Headers

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:assets-zeke.s3.amazonaws.com
Pragma:no-cache
Referer:http://lvh.me:5000/marketplace/addons/airbrake/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Response Headers
Accept-Ranges:bytes
Content-Length:6696
Content-Type:image/png
Date:Wed, 10 Oct 2012 17:56:17 GMT
ETag:"6de1a52294934c5e288894b84100d99b"
Last-Modified:Wed, 10 Oct 2012 17:50:38 GMT
Server:AmazonS3
x-amz-id-2:UGVKQ9VQbJ82DLDxR53uDP0ZUMgla+e0GU5vO9yLr6MsY8wijl9KnM7fOyDlT+ta
x-amz-request-id:8A16CF1E02A0106C

私はここを見るべきではありませんAccess-Control-Allow-Origin: *か？304 は、Amazon が応答をキャッシュしていることを意味しますか?

4

2 に答える 2

8

これは、画像要素が読み込まれる前にCORS を有効にしていないことが原因である可能性があります。

imgEl.crossOrigin = '';
于 2012-10-10T18:48:07.417 に答える
6

リクエストURL：https://s3.amazonaws.com/assets-zeke.heroku.com/addons-zeke.heroku.com/catalogs/58/original.png

さて、あなたの問題があります。CORS やその他のクロスドメインが機能する方法のため、DNS スタイルのアドレス指定を使用してバケットにアクセスする必要があります。

元の URL が正しいと仮定すると (そのようには見えませんが、完全に間違っている可能性があります)、代わりに次の URL を使用することをお勧めします。

http://assets-zeke.heroku.com.s3.amazonaws.com/addons-zeke.heroku.com/catalogs/58/original.png

言い換えると：

http://{bucket}.s3.amazonaws.com/path/object.ext

詳細については、http: //docs.amazonwebservices.com/AmazonS3/latest/dev/cors.htmlをご覧ください。

于 2012-10-10T08:46:07.350 に答える