S3 - Header Akses-Kontrol-Bolehkan-Asal

Apakah ada yang berhasil menambahkan Access-Control-Allow-Originheader respons? Yang saya butuhkan adalah sesuatu seperti ini:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

Permintaan dapatkan ini harus berisi di respons, tajuk, Access-Control-Allow-Origin: *

Pengaturan CORS saya untuk bucket terlihat seperti ini:

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

Seperti yang mungkin Anda harapkan tidak ada Origintajuk respons.

Biasanya, yang perlu Anda lakukan adalah "Tambahkan Konfigurasi CORS" di properti bucket Anda.

Itu <CORSConfiguration>datang dengan beberapa nilai default. Hanya itu yang saya butuhkan untuk menyelesaikan masalah Anda. Cukup klik "Simpan" dan coba lagi untuk melihat apakah itu berhasil. Jika tidak, Anda juga dapat mencoba kode di bawah ini (dari jawaban alxrb) yang tampaknya telah bekerja untuk sebagian besar orang.

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

Untuk info lebih lanjut, Anda dapat membaca artikel ini tentang Mengedit Izin Ember .

Saya mengalami masalah yang sama dengan memuat font web, ketika saya mengklik 'tambahkan konfigurasi CORS', di properti bucket, kode ini sudah ada di sana:

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

Saya baru saja mengklik simpan dan itu berhasil memperlakukan, font web kustom saya memuat di IE & Firefox. Saya bukan ahli dalam hal ini, saya hanya berpikir ini mungkin membantu Anda.

Jika permintaan Anda tidak menentukan Originheader, S3 tidak akan menyertakan header CORS dalam respons. Ini benar-benar membuat saya marah karena saya terus mencoba untuk menggulung file untuk menguji CORS tetapi curl tidak termasuk Origin.

@jordanstephens mengatakan ini dalam komentar, tetapi agak hilang dan merupakan perbaikan yang sangat mudah bagi saya.

Saya cukup menambahkan metode KEPALA dan mengklik disimpan dan mulai bekerja.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

Ini adalah cara sederhana untuk membuat ini berfungsi.

Saya tahu ini adalah pertanyaan lama, tetapi masih sulit untuk menemukan solusinya.

Untuk memulai, ini bekerja untuk saya pada proyek yang dibangun dengan Rails 4, Paperclip 4, CamanJS, Heroku dan AWS S3.

Anda harus meminta gambar Anda menggunakan crossorigin: "anonymous"parameter.

    <img href="your-remote-image.jpg" crossorigin="anonymous"> 

Tambahkan URL situs Anda ke CORS di AWS S3. Berikut ini adalah referensi dari Amazon tentang itu. Cukup banyak, cukup buka ember Anda, lalu pilih " Properti " dari tab di sebelah kanan, buka " tab Izin dan kemudian, klik" Edit Konfigurasi CORS ".

Awalnya, saya telah < AllowedOrigin>mengatur untuk *. Ubah saja tanda bintang itu ke URL Anda, pastikan untuk menyertakan opsi seperti http://dan https://di baris terpisah. Saya mengharapkan tanda bintang menerima "Semua", tetapi tampaknya kita harus lebih spesifik dari itu.

Ini adalah tampilannya bagiku.

Lihat jawaban di atas. (tapi saya punya bug chrome juga)

Jangan memuat dan menampilkan gambar pada halaman di CHROME. (jika nanti Anda akan membuat contoh baru)

Dalam kasus saya, saya memuat gambar dan menampilkannya di halaman. Ketika mereka diklik, saya membuat contoh baru dari mereka:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome telah menembolok versi lain dan TIDAK PERNAH mencoba mengambil kembali crossoriginversi (bahkan jika saya menggunakancrossorigin pada gambar yang ditampilkan.

Untuk memperbaikinya, saya menambahkan ?crossoriginke bagian akhir url gambar (tetapi Anda dapat menambahkan ?blah, itu hanya sewenang-wenang untuk mengubah status cache) ketika saya memuatnya untuk kanvas .. Beritahu saya jika Anda menemukan perbaikan yang lebih baik untuk CHROME

Saya hanya akan menambahkan jawaban ini - di atas - yang memecahkan masalah saya.

Untuk mengatur AWS / CloudFront Distribution Point untuk memacu CORS Origin Header, klik ke antarmuka edit untuk Distribution Point:

Buka tab perilaku dan edit perilaku, ubah "Cache Berdasarkan Header Permintaan Terpilih" dari Tidak Ada ke Daftar Putih, lalu pastikan Originditambahkan ke kotak daftar putih. Lihat Mengkonfigurasi CloudFront untuk Menghormati Pengaturan CORS di AWS Documents untuk lebih lanjut.

Saya mengalami masalah serupa memuat model 3D dari S3 ke penampil 3D javascript (3D HOP), tetapi anehnya hanya dengan jenis file tertentu (.nxs).

Apa yang diperbaiki untuk saya berubah AllowedHeaderdari default Authorizationke *dalam konfigurasi CORS:

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

Seperti orang lain yang memiliki status, Anda harus terlebih dahulu memiliki konfigurasi CORS di bucket S3 Anda:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Tetapi dalam kasus saya setelah melakukan itu, itu masih tidak berfungsi. Saya menggunakan Chrome (mungkin masalah yang sama dengan browser lain).

Masalahnya adalah Chrome menyimpan gambar dengan header (tidak berisi data CORS) , jadi apa pun yang saya coba ubah di AWS, saya tidak akan melihat header CORS saya.

Setelah membersihkan cache Chrome dan memuat ulang halaman , gambar memiliki Header CORS yang diharapkan

Saya mencoba semua jawaban di atas dan tidak ada yang berhasil. Sebenarnya, kita membutuhkan 3 langkah dari jawaban di atas bersama untuk membuatnya bekerja:

1. Seperti yang disarankan oleh Flavio; tambahkan konfigurasi CORS pada bucket Anda:

   <CORSConfiguration>
      <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
    </CORSConfiguration>
   

2. Pada gambar; sebutkan crossorigin:

   <img href="abc.jpg" crossorigin="anonymous">
   

3. Apakah Anda menggunakan CDN? Jika semuanya berfungsi dengan baik terhubung ke server asal tetapi TIDAK melalui CDN; itu berarti Anda memerlukan beberapa pengaturan pada CDN Anda seperti menerima tajuk CORS. Pengaturan yang tepat tergantung pada CDN yang Anda gunakan.

Saya tiba di utas ini, dan tidak ada solusi di atas yang ternyata berlaku untuk kasus saya. Ternyata, saya hanya perlu menghapus garis miring dari <AllowedOrigin>URL di konfigurasi CORS bucket saya.

Gagal:

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

Memenangkan:

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

Saya harap ini menyelamatkan seseorang dari mencabut rambut.

1. Atur konfigurasi CORS di pengaturan Izin untuk Anda S3 bucket

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

2. S3 menambahkan header CORS hanya ketika permintaan http memiliki Originheader.

3. CloudFront tidak meneruskan Originheader secara default

   Anda perlu memasukkan daftar putih Originheader di pengaturan Perilaku untuk CloudFront Distribution Anda.

Saya memperbaikinya menulis yang berikut ini:

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

Kenapa <AllowedHeader>*</AllowedHeader>berhasil dan <AllowedHeader>Authorization</AllowedHeader>tidak?

"jawaban" fwuensche adalah corret untuk mendirikan CDN; melakukan ini, saya menghapus MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

Di Konsol Manajemen S3 terbaru, ketika Anda mengklik pada konfigurasi CORS pada tab Izin, itu akan menunjukkan sampel konfigurasi CORS default. Konfigurasi ini tidak sebenarnya aktif! Anda harus terlebih dahulu mengklik simpan untuk mengaktifkan CORS.

Butuh waktu terlalu lama bagi saya untuk mengetahui hal ini, semoga ini akan menghemat waktu seseorang.

Konfigurasi ini memecahkan masalah bagi saya:

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

Peringatan - Retas.

Jika Anda menggunakan S3Image untuk menampilkan gambar dan kemudian mencoba mendapatkannya melalui pengambilan, mungkin untuk memasukkannya ke PDF atau melakukan pemrosesan lain, diperingatkan bahwa Chrome akan menembolok hasil pertama yang tidak memerlukan permintaan preflight CORS, dan kemudian coba untuk mendapatkan sumber daya yang sama tanpa permintaan PILIHAN prelight untuk pengambilan dan akan gagal karena pembatasan browser.

Cara lain untuk menyiasatinya adalah memastikan bahwa S3Image menyertakan crossorigin: 'gunakan-kredensial' seperti yang disebutkan di atas. Dalam file yang Anda gunakan S3Image, (Saya memiliki komponen yang membuat versi cache S3Image, jadi itu adalah tempat yang sempurna bagi saya), timpa metode prototipe imageEl S3Image untuk memaksanya memasukkan atribut ini.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

Masalah 403 sekarang telah diatasi. Aggrr sakit sekali!

<AllowedOrigin>*</AllowedOrigin>

bukan ide yang baik karena dengan * Anda memberikan akses situs web apa pun ke file di keranjang Anda. Sebagai gantinya, Anda harus menentukan asal mana yang benar-benar diizinkan untuk menggunakan sumber daya dari ember Anda. Biasanya, itu seperti nama domain Anda

<AllowedOrigin>https://www.example.com</AllowedOrigin>

atau jika Anda ingin menyertakan semua subdomain yang mungkin:

<AllowedOrigin>*.example.com</AllowedOrigin>

Di bawah ini adalah konfigurasi dan tidak masalah untuk saya. Saya harap ini akan membantu menyelesaikan masalah Anda di AWS S3.

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

Jawaban yang diterima berfungsi, tetapi tampaknya jika Anda pergi ke sumber daya secara langsung, maka tidak ada header lintas asal. Jika Anda menggunakan cloudfront, ini akan menyebabkan cloudfront untuk cache versi tanpa header. Ketika Anda kemudian pergi ke url berbeda yang memuat sumber ini, Anda akan mendapatkan masalah lintas asal ini.

Jika pengaturan CORS Anda tidak membantu Anda.

Pastikan konfigurasi S3 benar. Saya memiliki nama ember yang tidak valid di Storage.configure. Saya menggunakan nama singkat dari ember dan itu menyebabkan kesalahan:

Header 'Access-Control-Allow-Origin' tidak ada pada sumber daya yang diminta.

Pertama, aktifkan CORS di bucket S3 Anda. Gunakan kode ini sebagai panduan:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

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

2) Jika masih tidak berfungsi, pastikan juga menambahkan "crossorigin" dengan nilai "*" ke tag img Anda. Letakkan ini di file html Anda:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

Untuk apa nilainya, saya memiliki masalah serupa - ketika mencoba untuk menambahkan asal yang diizinkan spesifik (tidak *).

Ternyata saya harus memperbaiki

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

untuk

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(perhatikan slah terakhir di URL)

Semoga ini bisa membantu seseorang