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

แบบอักษรที่ให้บริการผ่าน Cloudfront ใช้งานไม่ได้ใน Firefox เนื่องจาก "ปัญหา URI หรือการเข้าถึงข้ามไซต์ไม่ถูกต้อง" เพื่อแก้ไขปัญหานี้ ฉันเข้าใจว่าฉันต้องตั้งค่าส่วนหัว "Access-Control-Allow-Origin" เป็นไวด์การ์ดหรือโดเมนต้นทาง

ปัญหาที่ฉันมีคือ Cloudfront ดูเหมือนจะไม่ยอมรับส่วนหัวจากต้นทาง

ตัวอย่างเช่น ต่อไปนี้เป็นรายการส่วนหัวที่ฉันได้รับเมื่อฉัน ping เซิร์ฟเวอร์ของฉันสำหรับแบบอักษร:

curl -I -s "https://mysite.com/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 29 Jan 2014 16:03:03 GMT
Content-Type: application/x-font-ttf
Content-Length: 44992
Last-Modified: Tue, 28 Jan 2014 22:21:41 GMT
Connection: keep-alive
ETag: "52e82d75-afc0"
Expires: Thu, 29 Jan 2015 16:03:03 GMT
Cache-Control: max-age=31536000
Access-Control-Allow-Origin: https://mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3600
Accept-Ranges: bytes

ทุกอย่างดูดีกับคำตอบนี้ อย่างไรก็ตาม เมื่อฉัน ping Cloudfront สำหรับทรัพยากรเดียวกัน ฉันจะได้รับ:

curl -I -s "https://ds6dj5kp03o39.cloudfront.net/wp-content/themes/my-theme/includes/fonts/ProximaNova-Reg-webfont.ttf"
HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 44992
Connection: keep-alive
Date: Wed, 29 Jan 2014 16:22:30 GMT
Server: Apache/2.2.16 (Debian) mod_ssl/2.2.16 OpenSSL/0.9.8o
Last-Modified: Wed, 22 Jan 2014 02:44:45 GMT
ETag: "5d633-afc0-4f0861b87a140"
Accept-Ranges: bytes
Cache-Control: max-age=3600
Expires: Wed, 29 Jan 2014 17:22:30 GMT
X-Cache: Miss from cloudfront
Via: 1.1 850e11212c3f83bfb138469e9b3b7718.cloudfront.net (CloudFront)
X-Amz-Cf-Id: M4qkj9FwjdAUW91U4WeZzxEI0m7vOmiQvryS55WwoeU5Ks11IC71ig==

ดูเหมือนว่าส่วนหัวดั้งเดิมทั้งหมดจะถูกละเว้นไปโดยสิ้นเชิง คำถามของฉันคือ ฉันจะทำให้ Cloudfront ยอมรับส่วนหัวเนื้อหาของฉันได้อย่างไร โดยเฉพาะส่วนหัว "Access-Control-Allow-Origin" ที่สำคัญ

ขอบคุณสำหรับความช่วยเหลือ!


cors cdn amazon-cloudfront
person tollmanz    schedule 29.01.2014    source แหล่งที่มา
comment
สวัสดี ฉันยังไม่เข้าใจว่าคำถามที่เชื่อมโยงได้รับคำตอบโดย: ตั้งค่าส่วนหัวบนเซิร์ฟเวอร์ของคุณอย่างไร ความคิดของฉันคือคุณต้องตั้งค่าส่วนหัวบนเซิร์ฟเวอร์ที่คุณกำลังเชื่อมต่อ ดีที่ไม่มีใครลงคะแนนความคิดเห็นได้เพราะฉันคงเป็นคนงี่เง่าที่นี่   -  person loveNoHate    schedule 29.01.2014
comment
ใช่แล้ว...นี่อาจเป็นปัญหาของฉันเหมือนกัน ;) ฉันคิดว่าสิ่งที่ ควรจะ เกิดขึ้นก็คือส่วนหัวบางส่วนที่คุณตั้งไว้บนเซิร์ฟเวอร์ของคุณยังคงอยู่โดย CloudFront เห็นได้ชัดว่าพวกเขาจะแทนที่จำนวนหนึ่ง แต่ฉันคิดว่าพวกเขาจะคงอยู่บางส่วน มีคนจำนวนมากเขียนบทความเกี่ยวกับวิธีการนี้ แต่มันก็ไม่ได้ผลสำหรับฉัน บางทีสมมติฐานนี้อาจผิดไปโดยสิ้นเชิง   -  person tollmanz    schedule 29.01.2014
comment
ใช้งานได้หรือไม่: docs.aws.amazon.com/AmazonS3/latest/ dev/cors.html ?   -  person loveNoHate    schedule 30.01.2014

คำตอบ (4)


arrow_upward
17
arrow_downward

หากคุณกำลังมาถึงสิ่งนี้ในภายหลัง และประสบปัญหากับต้นทางที่กำหนดเองซึ่งให้บริการส่วนหัว Access-Control-Allow-Origin อย่างถูกต้องแล้ว ต่อไปนี้เป็นสองสิ่งที่ฉันตรวจสอบ / ลองแล้ว:

  1. ตรวจสอบว่าการกำหนดค่า nginx หรือ apache ของคุณมี * อยู่ในเครื่องหมายคำพูดหรือไม่ หากมี ให้ลองลบออก
  2. ตรวจสอบให้แน่ใจว่าคุณส่งประเภทเนื้อหาที่ถูกต้องสำหรับไฟล์ woff และ ttf นี่เป็นลิงค์ที่เร็วที่สุดที่ฉันพบในหัวเรื่อง - https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts

อาปาเช่

หากต้องการตั้งค่าประเภท mime ที่ถูกต้องสำหรับไฟล์ฟอนต์ ให้เพิ่มบรรทัดนี้เพื่อกำหนดค่า:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

หากคุณไม่สามารถแก้ไขการกำหนดค่าได้ ให้สร้างไฟล์ .htaccess ในโฟลเดอร์ที่มีโปรเจ็กต์ของคุณและเพิ่มบรรทัดที่นั่น

สำหรับส่วนหัว CORS ให้เพิ่มโค้ดด้านล่าง:

<FilesMatch ".(eot|ttf|otf|woff)">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

คุณจะต้องเรียกใช้ service apache2 restart เมื่อคุณทำการเปลี่ยนแปลงเหล่านี้ และหากคุณได้รับข้อผิดพลาด Invalid command 'Header' นั่นหมายความว่าคุณไม่ได้เปิดใช้งานโมดูล mod_header ใน Apache ซึ่งคุณสามารถทำได้ด้วย a2enmod headers

nginx

ตามค่าเริ่มต้น nginx ไม่มีประเภท mime เริ่มต้นสำหรับแบบอักษร และประเภท mimy ไม่ถูกต้องสำหรับไฟล์ .eot ไปที่โฟลเดอร์ที่มีการกำหนดค่าและค้นหาว่าประเภทไมม์มีมลทินอยู่ที่ใด โดยปกติแล้วจะอยู่ในไฟล์ mimes.conf

ค้นหา .eot และสตริงด้วย เพิ่มสตริงด้านล่าง:

application/vnd.ms-fontobject    eot;
application/x-font-ttf           ttf;
application/font-woff            woff;

สำหรับส่วนหัว CORS ให้เพิ่มสิ่งนี้ลงในการกำหนดค่า vhost ของคุณ

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
person streetlogics    schedule 30.07.2014

arrow_upward
7
arrow_downward

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

คุณสามารถกำหนดค่า CloudFront ให้ส่งต่อส่วนหัว Origin ไปยัง S3 และแคชการตอบสนองที่แตกต่างกันสำหรับค่าส่วนหัวที่แตกต่างกัน ซึ่งจะส่งผลให้ CloudFront แคชส่วนหัว CORS เมื่อจำเป็น ดู http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors

person Alex North    schedule 24.11.2014

arrow_upward
6
arrow_downward

สิ่งที่คุณทำถูกต้อง แต่ CloudFront แคชผลลัพธ์ ดังนั้นคุณจึงได้รับแคชเวอร์ชันเก่า คุณสามารถดูสิ่งนี้ได้ในส่วนหัว: จากเว็บไซต์ของคุณ:

แก้ไขล่าสุด: วันอังคารที่ 28 มกราคม 2014 เวลา 22:21:41 GMT

จากคลาวด์ฟรอนท์:

แก้ไขล่าสุด: วันพุธที่ 22 มกราคม 2014 02:44:45 GMT

ตอนนี้วิธีทำให้มันทำงานอีกครั้ง:

ก) รอให้ออบเจ็กต์หมดอายุ จากนั้นจึงขออีกครั้ง CloudFront จะทำการอัพเดตแล้ว

b) ทำให้ออบเจ็กต์เป็นโมฆะโดยใช้คอนโซล amazon aws > cloudfront > การกระจาย > การทำให้ใช้งานไม่ได้ ดู http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html สำหรับรายละเอียดเกี่ยวกับวิธีการใช้งาน

c) เปลี่ยนชื่อหรือเริ่มใช้ชื่อเวอร์ชันสำหรับไฟล์ เช่น ProximaNova-Reg-webfont_2.ttf

person Paulo Cunha    schedule 17.03.2014
comment
ฉันกำลังจะบ้ากับเรื่องนี้ S3 มีการตั้งค่าส่วนหัว Access-Control-Allow-Origin เป็น * และผ่านคำขอ Cloudfront ส่วนหัวนั้นไม่ได้ถูกตั้งค่า หลังจากอ่านข้อความนี้ ฉันได้อัปโหลดไฟล์ใหม่ และตอนนี้ได้ตั้งค่าส่วนหัวแล้ว :) สมเหตุสมผลแล้ว ขอบคุณ! - person mwm; 23.01.2015

arrow_upward
3
arrow_downward

มีการกำหนดค่าที่ชัดเจนสำหรับที่เก็บข้อมูลของคุณเพื่อประเมินส่วนหัว CoRS แบบไดนามิก

  1. ดูเอกสาร AWS CORS
  2. คำอธิบายโดยละเอียดเกี่ยวกับการใช้งานด้วย

การพยายามตั้งค่าส่วนหัว CORS หรือมิฉะนั้นสำหรับ CF หรือ S3 จะถูกละทิ้งเนื่องจากจะทำให้โมเดลแคชเสียหาย

person Joseph Lust    schedule 17.08.2014