การตั้งค่าการเข้าถึง - การควบคุม - อนุญาต - กำเนิดบน Cloudfront

ฉันมีปัญหาในการแสดงสินทรัพย์คงที่ให้กับ Firefox โดยใช้ AWS Cloudfront

Chrome ใช้งานได้ดี แต่ Firefox คืนข้อผิดพลาด CORS

ถ้าฉันดำเนินการ curl ฉันจะได้รับ:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

ซึ่งฉันคิดว่าต้องการส่วนหัว:

Access-Control-Allow-Origin: *

มีใครช่วยฉันบ้าง เหตุใดจึงเป็นปัญหาใน Firefox และไม่ใช่ Chrome ฉันจะแก้มันได้อย่างไร

สิ่งแรกคุณต้องตรวจสอบให้แน่ใจว่าคุณอนุญาตรายการหัวเรื่องที่อนุญาต:

หากคุณต้องการให้ CloudFront เคารพการตั้งค่าการแชร์ทรัพยากรข้ามแหล่งกำเนิดให้กำหนดค่า CloudFront เพื่อส่งต่อส่วนหัวกำเนิดไปยังจุดเริ่มต้นของคุณ

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

ดูเพิ่มเติมได้ที่: http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

โดยวิธีการมีคำถามที่คล้ายกันหลายประการใน serverfault / stackoverflow และคำตอบมากมาย

นี่ซับซ้อนกว่าคำตอบที่ระบุเล็กน้อย

การรองรับ CORS เมื่อใช้งาน Cloudfront + S3 นั้นถูกนำไปใช้จริงใน S3 และทำงานได้ตามนี้ใน Amazon:

หัวข้อต้นทางของคำขอจะต้องตรงกับองค์ประกอบ AllowedOrigin

วิธีการร้องขอ (ตัวอย่างเช่น GET หรือ PUT) หรือส่วนหัวของคำขอวิธีการควบคุมการเข้าถึงในกรณีที่คำขอ OPTIONS preflight ต้องเป็นหนึ่งในองค์ประกอบ AllowedMethod

ทุกส่วนหัวที่ระบุไว้ในส่วนหัวของ Access-Control-Request-Headers ในคำขอ preflight จะต้องตรงกับองค์ประกอบ AllowedHeader

สิ่งนี้อาจไม่เหมาะสมหากลูกค้าไม่มีส่วนหัว Origin ที่ส่งจากลูกค้าการประมวลผลนี้จะไม่เสร็จสิ้น และเรากำลังใช้ Cloudfront อยู่ข้างหน้าซึ่งหากคุณเพียงแค่โฮสต์สินทรัพย์คงที่คุณอาจตั้งค่าให้ละเว้นส่วนหัวทั้งหมดเมื่อทำการแคช ดังนั้นหากการร้องขอครั้งแรกไปยังแต่ละไฟล์จากโหนดขอบที่ระบุไม่รวมส่วนหัวของแหล่งกำเนิดสินค้ามันจะแคชการตอบสนองโดยไม่ต้องมีส่วนหัว Access-Control-Allow-Origin

ผลลัพธ์คือคำร้องขอขาเข้าแรกจะพิจารณาว่าส่วนหัวใดที่ถูกส่งคืนสำหรับคำขอทั้งหมดจนกว่าแคชจะหมดอายุ

มีหลายวิธีในการแก้ไข / แก้ไขปัญหานี้

• ตั้งค่า cloudfront เพื่อทำการแคชแบบมีเงื่อนไขโดยยึดตามส่วนหัว "Origin"

วิธีนี้ใช้งานได้ดีหากคุณคาดหวังว่ามีแหล่งกำเนิดเพียงเล็กน้อยหรือแหล่งเดียว แต่ไม่เช่นนั้นอัตราส่วนแคชของคุณอาจไม่ดีนัก

• ใช้ Lambda @ edge เพื่อบังคับให้ตั้งค่าส่วนหัวซึ่งสามารถทำได้เพียงครั้งเดียวสำหรับแต่ละคำขอ (S3)

ยืดหยุ่นอย่างเต็มที่ แต่เพิ่มค่าใช้จ่ายและค่าใช้จ่าย

• ทำให้ cloudfront แทนที่ส่วนหัว "Origin" เป็นค่าดัมมี่สำหรับทุกคำขอ

สิ่งนี้มีประโยชน์จริง ๆ ในกรณี "Access-Control-Allow-Origin: *" และเป็นการแฮ็กนิดหน่อย แต่มันอาจเป็นทางออกที่ดีที่สุดในปัจจุบันเมื่อโฮสต์สินทรัพย์คงที่บน cloudfront + S3