S3 Çapraz Kaynak Kaynak Paylaşımı Çalışmıyor

Question

Kullanıcı tarafından yüklenen görüntüleri bulanıklaştırmak için blur.js kullanmayı deniyorum ve görüntüleri Amazon S3'te saklıyorum. Ben doğru CORS yapılandırma olmak ne düşündüğünü kurdum, ancak resimler bulanık edilemez ve ben tarayıcıda bu hatayı alıyorum: Burada

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. 

olması benim CORS yapılandırma:

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

Herhangi bir sorun neyin var?

Answer 1

CORS desteği için gereken doğru S3 bitiş noktası adres biçimini kullanmadığınıza dair bir şüphem var.

yani S3 kovalar bu biçimlerin ikisini de destekler:

1. http://bucket.s3.amazonaws.com/object
2. http://s3.amazonaws.com/bucket/object

Ama sadece ilk URL CORS çalışacak documentation göre:

CORS ile, grubunuzu açık olarak yapılandırabilirsiniz çapraz web sitesi isteklerini web sitesi.s3-website-us-east-1.amazonaws.com adresinden etkinleştirebilir.

Answer 2

Sadece yaptım. Temel olarak, S3 grup izinlerinizi düzenlemek ve çalışma yapmak için gerekli adımları takip edebilirsiniz. Daha fazla yardıma ihtiyacınız varsa, yorum bırakın.

1) AWS Yönetim Konsolu oturum açın ve Kovalar listesinde https://console.aws.amazon.com/s3/

2) en Amazon S3 konsolu açın özelliklerini görüntülemek ve "CORS yapılandırması ekle" yi istediğiniz

kova açmak

3) Eğer etiketleri arasına katmak isteyen kurallarını yaz <CORSConfiguration>

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

En kuralları hakkında daha fazla bilgi edinebilirsiniz: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

4) crossorigin belirtin = size tuval