S3 - การเข้าถึงการควบคุมการอนุญาตส่วนหัว

ไม่มีใครจัดการเพื่อเพิ่มAccess-Control-Allow-Originไปยังส่วนหัวการตอบสนองหรือไม่? สิ่งที่ฉันต้องการคือสิ่งนี้:

<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" />

คำขอรับนี้ควรมีในการตอบสนองส่วนหัว Access-Control-Allow-Origin: *

การตั้งค่า 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>

ตามที่คุณอาจคาดหวังว่าจะไม่มีOriginส่วนหัวการตอบสนอง

โดยปกติสิ่งที่คุณต้องทำคือ "เพิ่มการกำหนดค่า CORS" ในที่เก็บข้อมูลของคุณ

<CORSConfiguration>มาพร้อมกับค่าเริ่มต้นบางอย่าง นั่นคือทั้งหมดที่ฉันต้องการในการแก้ปัญหาของคุณ เพียงคลิก "บันทึก" แล้วลองอีกครั้งเพื่อดูว่าใช้งานได้หรือไม่ หากไม่เป็นเช่นนั้นคุณสามารถลองใช้รหัสด้านล่าง (จากคำตอบ alxrb) ซึ่งดูเหมือนว่าจะได้ผลกับคนส่วนใหญ่

<?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> 

สำหรับข้อมูลเพิ่มเติมคุณสามารถอ่านบทความนี้ในการแก้ไข Bucket อนุญาต

ฉันมีปัญหาคล้ายกันกับการโหลดแบบอักษรของเว็บเมื่อฉันคลิกที่ 'เพิ่มการตั้งค่า CORS' ในคุณสมบัติถังรหัสนี้มีอยู่แล้ว:

<?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> 

ฉันคลิกบันทึกและใช้งานได้แบบอักษรเว็บที่กำหนดเองของฉันโหลดใน IE & Firefox ฉันไม่เชี่ยวชาญในเรื่องนี้ฉันแค่คิดว่านี่อาจช่วยคุณได้

หากคำขอของคุณไม่ได้ระบุOriginหัวข้อ S3 จะไม่รวมส่วนหัว CORS ในการตอบกลับ นี้จริงๆโยนฉันเพราะฉันเก็บไว้พยายามจะขดไฟล์เพื่อทดสอบล ธ Originแต่ขดไม่รวมถึง

@ jordanstephens พูดอย่างนี้ในคอมเม้นท์ แต่มันหายไปและเป็นการแก้ไขที่ง่ายสำหรับฉัน

ฉันเพิ่งเพิ่มวิธี HEAD และคลิกบันทึกแล้วมันก็เริ่มทำงาน

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

นี่เป็นวิธีง่ายๆในการทำงานนี้

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ก็ยังหาวิธีแก้ปัญหาได้ยาก

ในการเริ่มต้นสิ่งนี้ใช้ได้กับฉันในโครงการที่สร้างด้วย Rails 4, Paperclip 4, CamanJS, Heroku และ AWS S3

คุณต้องขอภาพของคุณโดยใช้crossorigin: "anonymous"พารามิเตอร์

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

เพิ่ม URL เว็บไซต์ของคุณไปยัง CORS ใน AWS S3 นี่คือการอ้างอิงจาก Amazon เกี่ยวกับที่ ค่อนข้างมากเพียงไปที่ที่เก็บข้อมูลของคุณแล้วเลือก " คุณสมบัติ " จากแท็บทางด้านขวาเปิด " แท็บสิทธิ์ " แล้วคลิกที่ " แก้ไขการกำหนดค่า CORS "

เดิมผมได้ตั้งค่าให้< AllowedOrigin> *เพียงเปลี่ยนเครื่องหมายดอกจันให้เป็น URL ของคุณอย่าลืมใส่ตัวเลือกเช่นhttp://และhttps://แยกบรรทัด ฉันคาดหวังว่าเครื่องหมายดอกจันจะยอมรับ "ทั้งหมด" แต่ดูเหมือนว่าเราจะต้องเจาะจงมากกว่านั้น

นี่คือลักษณะที่ฉันต้องการ

ดูคำตอบข้างต้น (แต่ฉันมีข้อผิดพลาดของโครเมี่ยมด้วย)

อย่าโหลดและแสดงภาพบนหน้าในโครเมี่ยม (ถ้าคุณจะสร้างอินสแตนซ์ใหม่ภายหลัง)

ในกรณีของฉันฉันโหลดภาพและแสดงภาพเหล่านั้นบนหน้า เมื่อพวกเขาคลิกฉันสร้างอินสแตนซ์ใหม่ของพวกเขา:

// 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 มีแคชรุ่นอื่นอยู่แล้วและไม่เคยพยายามดึงข้อมูลcrossoriginรุ่นอีกครั้ง(แม้ว่าฉันจะใช้crossoriginกับรูปภาพที่แสดงก็ตาม

ในการแก้ไขฉันเพิ่ม?crossoriginท้าย URL ของภาพ (แต่คุณสามารถเพิ่ม?blahมันเป็นเพียงการเปลี่ยนสถานะแคช) โดยพลการเมื่อฉันโหลดลงใน Canvas .. แจ้งให้เราทราบหากคุณพบการแก้ไขที่ดีกว่าสำหรับโครเมี่ยม

ฉันจะเพิ่มคำตอบนี้ - มากกว่า - ซึ่งแก้ไขปัญหาของฉัน

หากต้องการตั้งค่าจุดแจกจ่าย AWS / CloudFront เป็น Torward CORS Origin Header ให้คลิกเข้าไปในส่วนต่อประสานแก้ไขสำหรับจุดแจกจ่าย:

ไปที่แท็บพฤติกรรมและแก้ไขพฤติกรรมเปลี่ยน "แคชตามส่วนหัวคำขอที่เลือก" จากไม่มีเป็นรายการที่อนุญาตแล้วตรวจสอบให้แน่ใจว่าOriginได้เพิ่มลงในกล่องรายการที่อนุญาตแล้ว ดูการกำหนดค่า CloudFront เพื่อเคารพการตั้งค่า CORSในเอกสาร AWS

ฉันมีปัญหาคล้ายกันในการโหลดแบบจำลอง 3 มิติจาก S3 ลงใน javascript 3D Viewer (3D HOP) แต่ก็แปลกพอสำหรับไฟล์บางประเภทเท่านั้น (.nxs)

สิ่งที่แก้ไขให้ฉันคือเปลี่ยนAllowedHeaderจากค่าเริ่มต้นAuthorizationเป็น*ในการกำหนดค่า 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>

เช่นเดียวกับที่คนอื่นมีสถานะคุณต้องมีการกำหนดค่า CORS ในที่ฝากข้อมูล S3 ของคุณก่อน:

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

แต่ในกรณีของฉันหลังจากทำอย่างนั้นมันก็ยังไม่ทำงาน ฉันใช้ Chrome (อาจเป็นปัญหาเดียวกันกับเบราว์เซอร์อื่น)

ปัญหาคือChrome ทำการแคชรูปภาพด้วยส่วนหัว (ไม่มีข้อมูล CORS)ดังนั้นไม่ว่าฉันจะพยายามเปลี่ยนแปลงอะไรใน AWS ฉันจะไม่เห็นส่วนหัว CORS ของฉัน

หลังจากล้างแคช Chrome และโหลดหน้าซ้ำภาพมีส่วนหัว CORS ที่คาดไว้

ฉันลองตอบคำถามทั้งหมดข้างต้นแล้วไม่มีอะไรทำงาน ที่จริงแล้วเราต้องการ 3 ขั้นตอนจากคำตอบข้างต้นร่วมกันเพื่อให้มันทำงาน:

1. ตามที่ Flavio แนะนำ เพิ่มการกำหนดค่า CORS ในที่เก็บข้อมูลของคุณ:

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

2. บนภาพ; พูดถึง crossorigin:

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

3. คุณใช้ CDN หรือไม่ หากทุกอย่างทำงานได้ดีเชื่อมต่อกับเซิร์ฟเวอร์ต้นทาง แต่ไม่ผ่าน CDN; หมายความว่าคุณต้องการการตั้งค่าบางอย่างบน CDN ของคุณเช่นยอมรับหัว CORS การตั้งค่าที่แน่นอนขึ้นอยู่กับ CDN ที่คุณใช้

ฉันมาที่หัวข้อนี้และไม่มีวิธีแก้ไขปัญหาใดที่นำไปใช้กับกรณีของฉัน ปรากฎว่าฉันต้องลบเครื่องหมายสแลชต่อท้ายออกจาก<AllowedOrigin>URLในการตั้งค่า CORS ของที่เก็บข้อมูล

ล้มเหลว:

<?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>

ชนะ:

<?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>

ฉันหวังว่านี่จะช่วยให้ใครบางคนมีผมที่ดึง

1. ตั้งค่าคอนฟิก CORS ในการตั้งค่าการอนุญาตสำหรับที่เก็บ S3 ของคุณ

   <?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 เพิ่มส่วนหัว CORS เฉพาะเมื่อคำขอ http มีOriginส่วนหัว

3. CloudFront ไม่ส่งต่อOriginส่วนหัวโดยค่าเริ่มต้น

   คุณต้องขึ้นบัญชีขาวOriginในการตั้งค่าลักษณะการทำงานสำหรับ CloudFront Distribution ของคุณ

ฉันแก้ไขมันเขียนต่อไปนี้:

<?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>

ทำไมถึง<AllowedHeader>*</AllowedHeader>ทำงานและ<AllowedHeader>Authorization</AllowedHeader>ไม่

fwuensche "คำตอบ" เป็นส่วนสำคัญในการตั้งค่า CDN; การทำเช่นนี้ฉันลบ MaxAgeSeconds

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

ใน S3 Management Console ล่าสุดเมื่อคุณคลิกที่การกำหนดค่า CORS บนแท็บการอนุญาตมันจะแสดงการกำหนดค่า CORS ตัวอย่างเริ่มต้น การกำหนดค่านี้ไม่ได้ใช้งานจริง! คุณต้องคลิกบันทึกก่อนเพื่อเปิดใช้งาน CORS

ฉันใช้เวลานานกว่าจะคิดออกหวังว่านี่จะช่วยใครซักคนได้สักพัก

การกำหนดค่านี้แก้ไขปัญหาให้ฉันได้:

<?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>

คำเตือน - แฮ็ค

หากคุณใช้ S3Image เพื่อแสดงรูปภาพและลองดึงมันมาผ่านการดึงข้อมูลบางทีอาจจะแทรกลงใน PDF หรือทำการประมวลผลอื่น ๆ ได้รับการเตือนว่า Chrome จะแคชผลลัพธ์แรกที่ไม่ต้องการ CORS preflight และ จากนั้นลองรับทรัพยากรเดียวกันโดยไม่มีการร้องขอ preflight OPTIONS สำหรับการดึงข้อมูลและจะล้มเหลวเนื่องจากข้อ จำกัด ของเบราว์เซอร์

อีกวิธีในการหลีกเลี่ยงปัญหานี้คือการทำให้แน่ใจว่า S3Image มี crossorigin: 'use-credentials' ตามที่กล่าวไว้ข้างต้น ในไฟล์ที่คุณใช้ S3Image (ฉันมีส่วนประกอบที่สร้างรุ่นที่เก็บไว้ของ S3Image ดังนั้นจึงเป็นสถานที่ที่สมบูรณ์แบบสำหรับฉัน) ให้แทนที่เมธอดต้นแบบ imageEl ของ S3Image เพื่อบังคับให้รวมแอตทริบิวต์นี้

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 })));
};

ปัญหา 403 ได้รับการแก้ไขแล้ว ช่างเจ็บปวดเหลือเกิน!

<AllowedOrigin>*</AllowedOrigin>

ไม่ใช่ความคิดที่ดีเพราะด้วย * คุณอนุญาตให้เว็บไซต์เข้าถึงไฟล์ในที่เก็บข้อมูลของคุณ คุณควรระบุแหล่งกำเนิดที่ได้รับอนุญาตให้ใช้ทรัพยากรจากที่เก็บของคุณแทน โดยปกตินั่นคือชื่อโดเมนของคุณเช่น

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

หรือถ้าคุณต้องการรวมโดเมนย่อยที่เป็นไปได้ทั้งหมด:

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

ด้านล่างคือการกำหนดค่าและมันก็ใช้ได้ดีสำหรับฉัน ฉันหวังว่ามันจะช่วยแก้ปัญหาของคุณใน 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>

คำตอบที่ได้รับการยอมรับใช้งานได้ แต่ดูเหมือนว่าถ้าคุณไปที่ทรัพยากรโดยตรงนั่นหมายความว่าไม่มีส่วนหัวไขว้ หากคุณใช้ cloudfront สิ่งนี้จะทำให้ cloudfront ทำการแคชรุ่นโดยไม่มีส่วนหัวเมื่อคุณไปที่ URL อื่นที่โหลดทรัพยากรนี้คุณจะได้รับปัญหาข้ามแหล่งนี้

หากการตั้งค่า CORS ของคุณไม่ช่วยคุณ

ตรวจสอบว่าการกำหนดค่าS3ถูกต้อง Storage.configureผมมีชื่อในถังที่ไม่ถูกต้อง ฉันใช้ชื่อถังสั้น ๆ และทำให้เกิดข้อผิดพลาด:

ไม่มีส่วนหัว 'Access-Control-Allow-Origin' บนทรัพยากรที่ร้องขอ

ก่อนอื่นให้เปิดใช้งาน CORS ในที่เก็บ S3 ของคุณ ใช้รหัสนี้เป็นแนวทาง:

<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) หากยังใช้งานไม่ได้ให้เพิ่ม "crossorigin" ที่มีค่า "*" ในแท็ก img ของคุณ วางไว้ในไฟล์ html ของคุณ:

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

สำหรับสิ่งที่คุ้มค่าฉันมีปัญหาคล้ายกัน - เมื่อพยายามเพิ่มต้นกำเนิดที่ได้รับอนุญาตเฉพาะ (ไม่ใช่ * )

ปรากฎว่าฉันต้องแก้ไข

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

ถึง

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

(บันทึก slah สุดท้ายใน URL)

หวังว่านี่จะช่วยใครซักคน