ปัญหา AWS Cloudfront CORS กับไฟล์ฟอนต์

ฉันมีแอปพลิเคชัน Javascript ที่ส่งไปยังเบราว์เซอร์จากจุดสิ้นสุด CloudFront ไฟล์สแตติกทั้งหมดของแอปพลิเคชันนั้นโฮสต์อยู่ในบัคเก็ต S3 ซึ่งเกี่ยวข้องกับไฟล์จาวาสคริปต์และไฟล์ css รวมทั้งไฟล์ฟอนต์บางไฟล์

html ที่โหลดแอปพลิเคชันทั้งหมดถูกสร้างขึ้นและจัดส่งโดยเซิร์ฟเวอร์ เรียกเซิร์ฟเวอร์นั้นว่า "https://my.domain.com"

ดังที่กล่าวไว้ นี่เป็นเพียงไฟล์ html ทั้งหมด จากนั้นเนื้อหาแบบสแตติกจะถูกดาวน์โหลดจาก cloudfront endpoint ซึ่งชี้ไปที่บัคเก็ตซึ่งเป็นต้นทาง เรียกสิ่งเหล่านี้ว่า xxxx.cloudfront.net และที่ฝากข้อมูลของฉัน

เท่าที่ฉันเข้าใจ คำขอใด ๆ จาก html ที่สร้างขึ้นนั้นไปยัง cloudfront endpoint เป็นคำขอ CORS เนื่องจากต้นทางของ html คือ my.domain.com และไฟล์ที่ร้องขอทั้งหมดไม่ได้โฮสต์บนโดเมนนั้นอย่างชัดเจน

แน่นอนว่าฉันไปตั้งค่า CORS ทั้งหมด ประการแรก ที่ฝากข้อมูลเป็นแบบสาธารณะอย่างสมบูรณ์ และมีนโยบาย CORS ดังต่อไปนี้:

[
    {
        "AllowedHeaders": [
            "*"
        ]
        "AllowedMethods": [
            "รับ"
        ]
        "AllowedOrigins": [
            "*",
        ]
        "เปิดเผยส่วนหัว": [],
        "MaxAgeSeconds": 3000
    }
]

และดูเหมือนว่าจะได้ผลสำหรับทุกสิ่ง... ยกเว้น ไฟล์ฟอนต์! ฉันน่าจะพูดถึงโครงสร้างโฟลเดอร์ของที่ฝากข้อมูล มีสามโฟลเดอร์ การผลิต การพัฒนา และทั่วไป เนื้อหาของสิ่งเหล่านี้ควรอธิบายได้ด้วยตนเอง Common มีฟอนต์ รวมถึงไลบรารีจาวาสคริปต์ของบุคคลที่สาม การผลิตและการพัฒนาประกอบด้วย js และ css สำหรับสภาพแวดล้อมที่เกี่ยวข้อง

ไม่ว่ากรณีใด ๆ, ทุกอย่าง โหลด ยกเว้นไฟล์ฟอนต์ ซึ่งฉันได้รับข้อผิดพลาดต่อไปนี้:

การเข้าถึงแบบอักษรที่ 'https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2' จากต้นทาง 'https://my.domain.com' ถูกบล็อกโดยนโยบาย CORS: ไม่ ส่วนหัว 'Access-Control-Allow-Origin' มีอยู่ในทรัพยากรที่ร้องขอ

มันทำให้ฉันรู้สึกแปลกมากที่ เท่านั้น ไฟล์ฟอนต์จะมีปัญหานี้ ไฟล์อื่นๆ ในโฟลเดอร์ทั่วไปดูเหมือนจะโหลดได้ดี และถ้าฉันเพิ่งวาง https://xxxx.cloudfront.net/common/fonts/outline/budicon-classic.ttf?jdete2 ลงในเบราว์เซอร์ของฉัน ทำงาน.

ข้อแตกต่างเพียงอย่างเดียวคือไฟล์เหล่านี้ไม่ได้โหลดจาก html แต่จาก css ผ่าน @font-face thingy เมื่อดูที่คำขอที่สร้างโดยเบราว์เซอร์เมื่อโหลดแอปพลิเคชัน ฉันเห็นได้อย่างชัดเจนว่ามีการตั้งค่าส่วนหัวต้นทาง ซึ่งไม่ใช่สำหรับการร้องขอไฟล์ js หรือ css Set-Fetch-Mode ถูกตั้งค่าเป็น "cors" ในขณะที่ไฟล์อื่นๆ ถูกตั้งค่าเป็น "no-cors"

ในกรณีใด ๆ ฉันพยายามแก้ไขปัญหาที่ด้าน cloudfront อันดับแรก ฉันเพิ่มส่วนหัว "Access-Control-Allow-Origin: *" ในการกำหนดค่าต้นทาง จากนั้นฉันเพิ่มการกำหนดค่าพฤติกรรมสำหรับต้นทางเพื่ออนุญาต GET, HEAD, OPTIONS สำหรับรูปแบบพาธ *

และตอนนี้... ตอนนี้ฉันยังคงมีปัญหาเดิม และไม่มีไอเดียอะไรเลย แม้จะสงสัยว่าทำไมคำขอที่สร้างโดย @font-face จึงแตกต่างกันมากเมื่อเทียบกับคำขอทรัพยากร javascript และ css แต่ เหนือสิ่งอื่นใดฉันสามารถทำอะไรได้บ้างเพื่อโหลดฟอนต์นองเลือด