แบบอักษรจากแหล่งกำเนิดถูกบล็อกไม่ให้โหลดโดยนโยบายการแบ่งปันทรัพยากรข้ามแหล่งกำเนิด

ฉันได้รับข้อผิดพลาดต่อไปนี้ในเบราว์เซอร์ Chrome สองสามตัว แต่ไม่ใช่ทั้งหมด ไม่แน่ใจว่าปัญหานี้เกิดขึ้นที่ใด

แบบอักษรจากจุดเริ่มต้น ' https://ABCDEFG.cloudfront.net ' ถูกปิดกั้นไม่ให้โหลดโดยนโยบายการแชร์ทรัพยากรข้ามแหล่งที่มา: ไม่มีส่วนหัว 'การควบคุมการเข้าถึงการอนุญาต - แหล่งกำเนิด' ปรากฏอยู่บนทรัพยากรที่ร้องขอ แหล่งกำเนิด ' https://sub.domain.com ' จึงไม่ได้รับอนุญาตให้เข้าถึง

ฉันมีการตั้งค่า CORS ต่อไปนี้ใน S3

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

การร้องขอ

Remote Address:1.2.3.4:443
Request URL:https://abcdefg.cloudfront.net/folder/path/icons-f10eba064933db447695cf85b06f7df3.woff
Request Method:GET
Status Code:200 OK
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:abcdefg.cloudfront.net
Origin:https://sub.domain.com
Pragma:no-cache
Referer:https://abcdefg.cloudfront.net/folder/path/icons-e283e9c896b17f5fb5717f7c9f6b05eb.css
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

คำขออื่น ๆ ทั้งหมดจาก Cloudfront / S3 ทำงานอย่างถูกต้องรวมถึงไฟล์ JS

เพิ่มกฎนี้ลงใน. htaccessของคุณ

Header add Access-Control-Allow-Origin "*" 

ยิ่งไปกว่านั้นตามที่ @david thomas แนะนำคุณสามารถใช้ค่าโดเมนเฉพาะเช่น

Header add Access-Control-Allow-Origin "your-domain.com"

Chrome ตั้งแต่ ~ กันยายน / ตุลาคม 2014 หมวดอักษรเรื่องที่ล ธ เดียวกันการตรวจสอบเป็น Firefox ได้ทำhttps://code.google.com/p/chromium/issues/detail?id=286681 มีการอภิปรายเกี่ยวกับเรื่องนี้ในhttps://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw

ระบุว่าสำหรับแบบอักษรเบราว์เซอร์อาจทำตรวจสอบ preflightแล้วนโยบายของคุณ S3 ต้องการ ธ ร้องขอส่วนหัวเช่นกัน คุณสามารถตรวจสอบหน้าเว็บของคุณในแบบว่า Safari (ซึ่งในปัจจุบันไม่ได้ทำการตรวจสอบ CORS สำหรับแบบอักษร) และ Firefox (ที่ทำ) เพื่อตรวจสอบอีกครั้งนี่เป็นปัญหาที่อธิบายไว้

ดูสแต็คโอเวอร์โฟลว์คำตอบในAmazon S3 CORS (การแชร์ทรัพยากรข้ามแหล่งกำเนิด) และการโหลดแบบอักษรข้ามโดเมนของ Firefoxสำหรับรายละเอียด Amazon S3 CORS

หมายเหตุทั่วไปเพราะสิ่งนี้เคยใช้กับ Firefox เท่านั้นดังนั้นมันอาจช่วยในการค้นหา Firefox มากกว่า Chrome

ฉันสามารถแก้ไขปัญหาได้โดยเพียงเพิ่ม<AllowedMethod>HEAD</AllowedMethod>นโยบาย CORS ของ 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>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Nginx:

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

AWS S3:

1. เลือกถังของคุณ
2. คลิกคุณสมบัติที่ด้านบนขวา
3. การอนุญาต => แก้ไขการกำหนดค่า Cors => บันทึก
4. บันทึก

http://schock.net/articles/2013/07/03/hosting-web-fonts-on-a-cdn-youre-going-to-need-some-cors/

เมื่อวันที่ 26 มิถุนายน 2014 AWS ปล่อย Vary ที่เหมาะสม: Origin Behavior บน CloudFront ดังนั้นตอนนี้คุณก็แค่

ตั้งค่า CORS สำหรับที่เก็บ S3 ของคุณ:

<AllowedOrigin>*</AllowedOrigin>

ใน CloudFront -> การกระจาย -> พฤติกรรมสำหรับต้นกำเนิดนี้ให้ใช้ตัวเลือกส่งต่อหัว: รายการที่ปลอดภัยและรายการที่อนุญาตในส่วนหัว 'แหล่งกำเนิด'

รอประมาณ 20 นาทีในขณะที่ CloudFront เผยแพร่กฎใหม่

ตอนนี้การกระจายของ CloudFront ของคุณควรแคชการตอบสนองที่แตกต่างกัน (ด้วยส่วนหัว CORS ที่เหมาะสม) สำหรับไคลเอนต์ Origin ส่วนหัว

สิ่งเดียวที่ใช้ได้ผลสำหรับฉัน (อาจเป็นเพราะฉันมีความไม่สอดคล้องกับการใช้งาน www.):

วางสิ่งนี้ลงในไฟล์. htaccess ของคุณ:

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>
# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

# Browsers usually ignore the font MIME types and sniff the content,
# however, Chrome shows a warning if other MIME types are used for the
# following fonts.
AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

# Make SVGZ fonts work on iPad:
# https://twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

# rewrite www.example.com → example.com

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
</IfModule>

http://ce3wiki.theturninggate.net/doku.php?id=cross-domain_issues_broken_web_fonts

ฉันมีปัญหาเดียวกันนี้และลิงค์นี้เป็นทางออกสำหรับฉัน:

http://www.holovaty.com/writing/cors-ie-cloudfront/

เวอร์ชั่นย่อของมันคือ:

1. แก้ไขการตั้งค่า S3 CORS (ตัวอย่างรหัสของฉันแสดงไม่ถูกต้อง)
   หมายเหตุ: สิ่งนี้ได้ทำไปแล้วในคำถามต้นฉบับ
   หมายเหตุ: รหัสที่ให้นั้นไม่ปลอดภัยมากข้อมูลเพิ่มเติมในหน้าที่เชื่อมโยง
2. ไปที่แท็บ "พฤติกรรม" ของการแจกจ่ายและคลิกเพื่อแก้ไข
3. เปลี่ยน "ส่วนหัวไปข้างหน้า" จาก "ไม่มี (ปรับปรุงการแคช)" เป็น "รายการที่อนุญาต"
4. เพิ่ม“ Origin” ไปยังรายการ "Whitelist Headers"
5. บันทึกการเปลี่ยนแปลง

การกระจาย cloudfront ของคุณจะอัปเดตซึ่งใช้เวลาประมาณ 10 นาที หลังจากนั้นทุกอย่างจะดีคุณสามารถตรวจสอบได้โดยตรวจสอบว่า CORS ข้อความผิดพลาดที่เกี่ยวข้องหายไปจากเบราว์เซอร์

สำหรับผู้ที่ใช้ผลิตภัณฑ์ Microsoft พร้อมไฟล์ web.config:

รวมกับ web.config ของคุณ

หากต้องการอนุญาตให้ใช้บนโดเมนใดก็ได้ให้แทนที่value="domain"ด้วยvalue="*"

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webserver>
    <httpprotocol>
      <customheaders>
        <add name="Access-Control-Allow-Origin" value="domain" />
      </customheaders>
    </httpprotocol>
  </system.webserver>
</configuration>

หากคุณไม่ได้รับอนุญาตให้แก้ไข web.config ให้เพิ่มบรรทัดนี้ในโค้ดฝั่งเซิร์ฟเวอร์ของคุณ

Response.AppendHeader("Access-Control-Allow-Origin", "domain");

มี writeup ดีคือที่นี่

การกำหนดค่านี้ใน nginx / apache เป็นความผิดพลาด
หากคุณใช้ บริษัท โฮสติ้งคุณจะไม่สามารถกำหนดค่าขอบได้
หากคุณใช้ Docker แอปควรมีอยู่ในตัว

โปรดทราบว่าตัวอย่างบางตัวอย่างใช้connectHandlersแต่จะตั้งค่าส่วนหัวบนเอกสารเท่านั้น การใช้rawConnectHandlersใช้กับเนื้อหาทั้งหมดที่ให้บริการ (แบบอักษร / css / ฯลฯ )

  // HSTS only the document - don't function over http.  
  // Make sure you want this as it won't go away for 30 days.
  WebApp.connectHandlers.use(function(req, res, next) {
    res.setHeader('Strict-Transport-Security', 'max-age=2592000; includeSubDomains'); // 2592000s / 30 days
    next();
  });

  // CORS all assets served (fonts/etc)
  WebApp.rawConnectHandlers.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    return next();
  });

นี่จะเป็นช่วงเวลาที่ดีที่จะดูนโยบายของเบราว์เซอร์เช่นการทำเฟรมเป็นต้น

เพียงเพิ่มการใช้จุดกำเนิดในของคุณหากคุณใช้ node.js เป็นเซิร์ฟเวอร์ ...

แบบนี้

  app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

เราต้องการคำตอบสำหรับแหล่งกำเนิด

วิธีแก้ปัญหาการทำงานสำหรับ heroku อยู่ที่นี่http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (ตามคำพูด):

ด้านล่างเป็นสิ่งที่คุณสามารถทำได้ถ้าคุณใช้แอพ Rails ใน Heroku และใช้ Cloudfront เป็น CDN ของคุณ ได้ทำการทดสอบกับ Ruby 2.1 + Rails 4, Heroku Cedar stack

เพิ่มส่วนหัว CORS HTTP (Access-Control- *) ลงในสินทรัพย์แบบอักษร

• เพิ่ม gem font_assetsใน Gemfile
• bundle install
• เพิ่มไปconfig.font_assets.origin = '*' config/application.rbหากคุณต้องการการควบคุมที่ละเอียดยิ่งขึ้นคุณสามารถเพิ่มค่าต้นกำเนิดที่แตกต่างกันให้กับสภาพแวดล้อมที่แตกต่างกันเช่นconfig/config/environments/production.rb
• curl -I http://localhost:3000/assets/your-custom-font.ttf
• กดรหัสเพื่อ Heroku

กำหนดค่า Cloudfront เพื่อส่งต่อส่วนหัว CORS HTTP

ใน Cloudfront เลือกการกระจายของคุณภายใต้แท็บ "พฤติกรรม" เลือกและแก้ไขรายการที่ควบคุมการส่งแบบอักษรของคุณ (สำหรับแอพ Rails ที่ง่ายที่สุดที่คุณมีเพียง 1 รายการที่นี่) เปลี่ยนส่วนหัวไปข้างหน้าจาก "ไม่มี" เป็น "Whilelist" และเพิ่มส่วนหัวต่อไปนี้ในรายการที่อนุญาต:

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age

บันทึกและนั่นคือมัน!

Caveat: ฉันพบว่าบางครั้ง Firefox จะไม่รีเฟรชแบบอักษรแม้ว่าข้อผิดพลาด CORS จะหายไป ในกรณีนี้ให้รีเฟรชหน้าเว็บสองสามครั้งเพื่อโน้มน้าวให้ Firefox ที่คุณตั้งใจจริง ๆ