मूल से फ़ॉन्ट को क्रॉस-ऑरिजिन रिसोर्स शेयरिंग पॉलिसी द्वारा लोड करने से रोक दिया गया है

159

मैं क्रोम ब्राउज़र के एक जोड़े पर निम्नलिखित त्रुटि प्राप्त कर रहा हूं, लेकिन सभी नहीं। पूरी तरह से यकीन नहीं है कि इस मुद्दे पर क्या मुद्दा है।

मूल से फ़ॉन्ट ' https://ABCDEFG.cloudfront.net ' को क्रॉस-ऑरिजिनल रिसोर्स शेयरिंग पॉलिसी द्वारा लोड करने से अवरुद्ध किया गया है: अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है। इसलिए ' https://sub.domain.com ' को एक्सेस की अनुमति नहीं है।

मेरे पास S3 पर निम्नलिखित CORS कॉन्फ़िगरेशन है

<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 फाइलें भी शामिल हैं।

— डलास क्लार्क
स्रोत

5

मुझे वही समस्या हो रही है ... मैंने क्रोम 37.0.2062.94 में अपग्रेड करने के बाद इसे देखना शुरू कर दिया है

— kirley

कॉर्स कॉन्फ़िगरेशन को अपडेट करने के बाद, मैंने संपत्ति का नाम बदला और इसे काम करने में कामयाब रहा। तो या तो 1) CORS विन्यास फाइल निर्माण पर ही लागू होता है (अद्यतन नहीं) या 2) CORS विन्यास क्लाउडफ्रंट पर कैश किया जाता है। मैं इसे एक उत्तर के रूप में पोस्ट करूंगा यदि अन्य यह पुष्टि कर सकते हैं कि यह उनके लिए भी काम करता है।

— डलास क्लार्क

1

बस Chrome v। 37.0.2062.94 के साथ इस पर ध्यान दिया गया है लेकिन पहले वाला संस्करण नहीं है। मेरे पास S3 पर एक CORS कॉन्फ़िगरेशन नहीं है, इसलिए यह सही नहीं होना चाहिए?

— गॉपर 21

1

@ Ghopper21 आपको सही CORS विन्यास की आवश्यकता है। फ़ायरफ़ॉक्स में परीक्षण करें और वह आपको (शायद) एक ही परिणाम देगा।

— टिम डिगिन्स

1

@RichPeck - S3 में सही CORS कॉन्फिगर जोड़कर ठीक करें (या यदि स्रोत से स्वचालित रूप से अपना CDN बना रहे हैं, तो यह थोड़ा अधिक जटिल है - आपको उपयुक्त हेडर जोड़ना होगा, फिर अपने कैश्ड फोंट को अमान्य करना होगा) ... stackover.com.com / प्रश्न / 12229844 /… अधिक विवरण के लिए नीचे देखें

— टिम डिगिन्स

87

इस नियम को अपने .htaccess में जोड़ें

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

इससे भी बेहतर, जैसा कि @david thomas द्वारा सुझाया गया है, आप एक विशिष्ट डोमेन मान का उपयोग कर सकते हैं, जैसे

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

— जियोवन्नी डि ग्रेगोरियो
स्रोत

1

हाय, इससे क्या फर्क पड़ता है Header set Access-Control-Allow-Origin "*"? धन्यवाद

— NineCattoRules

8

विंडोज़ लोगों के लिए, web.config फ़ाइल में <customHeaders> के तहत <add name = "Access-Control-Allow-Origin" मान = "*"> सेट करें। एक अच्छा दिन है

— Arsalan सलीम

2

@ अंतर यह है कि "हेडर" के साथ प्रतिक्रिया हेडर मौजूदा हेडर के सेट में जोड़ा जाता है, भले ही यह हेडर पहले से मौजूद हो। इसके परिणामस्वरूप दो (या अधिक) हेडर एक ही नाम हो सकते हैं; जबकि "सेट" के साथ प्रतिक्रिया हेडर सेट किया जाता है, इस नाम के साथ किसी भी पिछले हेडर की जगह। इस मामले में एक ही कारण है * उन सभी को शामिल करता है।

— गियोवन्नी डि ग्रेगोरियो

@GOVanniDiGregorio अच्छी जानकारी के लिए धन्यवाद!

— NineCattoRules

21

बस नोटिंग Access-Control-Allow-Origin "*"संभावित रूप से असुरक्षित है क्योंकि यह किसी भी डोमेन से जावास्क्रिप्ट एक्सेस के लिए डोमेन खोलता है। आपको इसके बजाय एक विशिष्ट डोमेन मूल्य का उपयोग करना चाहिए, उदाहरण Access-Control-Allow-Origin "http://example1.com"के लिए एक अच्छी व्याख्या के लिए stackoverflow.com/a/10636765/583715 भी देखें ।

— डेविड थॉमस

59

Chrome के बाद से ~ Sep / Oct 2014 समान CORS चेक के लिए फोंट को विषय बनाता है क्योंकि फ़ायरफ़ॉक्स ने https://code.google.com/p/chromium/issues/detail?id=286681 किया है । Https://groups.google.com/a/chromium.org/forum/?fromgroups=# .topic/blink-dev/TT9D5- Zfnzw पर इस पर चर्चा चल रही है।

यह देखते हुए कि फोंट के लिए ब्राउज़र प्रीफ्लाइट चेक कर सकता है , तो आपकी S3 पॉलिसी को cors के हेडर के रूप में भी अनुरोध करना होगा । आप अपने पेज को सफारी (जो वर्तमान में फोंट के लिए कोर्स चेकिंग नहीं करते हैं) और फ़ायरफ़ॉक्स (जो करता है) को चेक करने के लिए कह सकते हैं कि यह समस्या है।

Amazon S3 CORS विवरण के लिए Amazon S3 CORS (क्रॉस-ऑरिजिनल रिसोर्स शेयरिंग) और फ़ायरफ़ॉक्स क्रॉस-डोमेन फॉन्ट पर स्टैक ओवरफ्लो उत्तर देखें।

एनबी सामान्य तौर पर क्योंकि यह केवल फ़ायरफ़ॉक्स पर लागू होता था, इसलिए यह क्रोम के बजाय फ़ायरफ़ॉक्स को खोजने में मदद कर सकता है।

— टिम डिगिन्स
स्रोत

इस उत्तर के लिए धन्यवाद, ऐसा लगता है कि यह कई अन्य लोगों के लिए एक समस्या हो सकती है। हालाँकि मेरी समस्या क्रोम के एक स्थिर निर्माण में हो रही थी।

— डलास क्लार्क

45

क्रोम में अब यही हो रहा है।

— justingordon

जैसा कि लोग इस जवाब का जिक्र करते हैं (अपने आप को भी!), मैंने इसे कम ऐतिहासिक और वर्तमान दिन के लिए अधिक प्रासंगिक बना दिया है।

— टिम डिगिन्स

1

FYI करें मुझे पता चला है कि एक त्रुटि संदेश "क्रॉस-ऑरिजिनल रिसोर्स शेयरिंग पॉलिसी द्वारा लोड करने से अवरुद्ध किया गया है: कोई 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन' हेडर अनुरोधित संसाधन पर मौजूद है। मूल" वास्तव में एक खराब होने के साथ करना था। मेरे मूल सर्वर में एक फ़ॉन्ट फ़ाइल का पथ, और क्लाउडफ्रंट फिर मेरे सर्वर के मुखपृष्ठ पर पुनर्निर्देशित करता है (और या तो पुनर्निर्देशित प्रतिक्रिया या मुखपृष्ठ में कोर हेडर नहीं था)। भ्रामक, लेकिन वास्तविक फ़ॉन्ट फ़ाइल के लिए सही पथ का उपयोग करके हल किया गया (न कि कॉर्स मुद्दा, सख्ती से बोलना)।

— टिम डिगिन्स

हे @ डलास क्लार्क, आप अपने प्रश्न के लिए स्वीकृत उत्तर चुनना चाह सकते हैं। धन्यवाद टिम, आपके लिंक और स्पष्टीकरण मेरे अनुभव में सहायक थे। चीयर्स।

— डैन

46

मैं <AllowedMethod>HEAD</AllowedMethod>S3 बाल्टी की 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>

— Öज़र एस।
स्रोत

हालांकि सुरक्षा के बारे में निश्चित नहीं है, अच्छा होगा यदि किसी को उस पर कुछ इनपुट मिले ..

— एस.एस.

क्या इस परिवर्तन को प्रचार के लिए समय चाहिए? मैंने बस <AllowedMethod>HEAD</AllowedMethod>बाल्टी पर अपनी CORS नीति में जोड़ा और यह अभी भी काम नहीं कर रहा है।

— साल्वातोर Iovene

आम तौर पर नहीं, यह अधिकतम लेना चाहिए। युगल मिनट

— एस.एस.

30

nginx:

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

एडब्ल्यूएस एस 3:

अपनी बाल्टी का चयन करें
राइट टॉप पर प्रॉपर्टीज पर क्लिक करें
अनुमति => Cors कॉन्फ़िगरेशन संपादित करें => सहेजें
सहेजें

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

— यानिव वोवा अल्टरमैन
स्रोत

इसे जोड़ने के बाद, 404 नहीं मिला।

— नेओबी

12

26 जून 2014 को AWS ने उचित Vary: Orig के व्यवहार को CloudFront पर जारी किया ताकि अब आप बस

अपने S3 बाल्टी के लिए एक CORS विन्यास सेट करें:

<AllowedOrigin>*</AllowedOrigin>

CloudFront में -> वितरण -> इस मूल के लिए व्यवहार, फॉरवर्ड हेडर्स का उपयोग करें: श्वेत सूची विकल्प और 'मूल' हेडर को श्वेतसूची में।

CloudFront नए नियम का प्रचार करते समय ~ 20 मिनट तक प्रतीक्षा करें

अब आपके CloudFront वितरण को अलग-अलग क्लाइंट उत्पत्ति हेडर के लिए अलग-अलग प्रतिक्रियाओं (उचित CORS हेडर के साथ) को कैश करना चाहिए।

— KBH
स्रोत

1

यह काम नहीं करता है, क्या आपके पास अधिक विवरण है? मैंने इसे सक्षम किया लेकिन मुझे अभी भी वही मुद्दा मिलता है।

— जैको प्रीटोरियस

7

केवल एक चीज जिसने मेरे लिए काम किया है (शायद इसलिए कि मुझे 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

— Luigi04
स्रोत

1

बहुत बढ़िया! आपका बहुत बहुत धन्यवाद!

— रोटिमी

1

चूंकि आपका कोड विस्तृत था, इसलिए मुझे इसके माध्यम से जाने में कुछ समय लगा, मैंने हालांकि कुछ चीजें सीखीं। मैंने इसका समाधान लागू करने के लिए इसका कुछ हिस्सा लगाया। इसने काम कर दिया।

— मोहम्मद मोइनुद्दीन वसीम

3

मुझे भी यही समस्या थी और इस लिंक ने मेरे लिए समाधान प्रदान किया:

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

इसका संक्षिप्त संस्करण है:

S3 CORS कॉन्फिगर संपादित करें (मेरा कोड नमूना ठीक से प्रदर्शित नहीं हुआ)
नोट: यह पहले से ही मूल प्रश्न में किया गया है
नोट: प्रदान किया गया कोड बहुत सुरक्षित नहीं है, लिंक किए गए पृष्ठ में अधिक जानकारी।
अपने वितरण के "व्यवहार" टैब पर जाएं और संपादित करने के लिए क्लिक करें
"फॉरवर्ड हेडर्स" को "कोई नहीं (कैशिंग बढ़ाता है)" से "श्वेतसूची" में बदलें।
"व्हाइटेलिस्ट हेडर्स" सूची में "उत्पत्ति" जोड़ें
परिवर्तनों को सुरक्षित करें

आपका क्लाउडफ्रंट वितरण अपडेट होगा, जिसमें लगभग 10 मिनट लगते हैं। उसके बाद, सब ठीक होना चाहिए, आप यह जांच कर सत्यापित कर सकते हैं कि ब्राउज़र से CORS संबंधित त्रुटि संदेश चले गए हैं।

— agbodike
स्रोत

2

Web.config फ़ाइल के साथ Microsoft उत्पादों का उपयोग करने वालों के लिए:

इसे अपने 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");

— nu everest
स्रोत

हमें विंडोज उपयोगकर्ताओं को याद रखने के लिए एक वोट का वर्णन करता है।

— मोहतरान

मैं asp.net कोर का उपयोग कर रहा हूँ, मैं इसे appsettings.json फ़ाइल में कैसे जोड़ूँ?

— युसुफ सोडिक

1

यहां एक अच्छा राइटअप है ।

इसे nginx / apache में कॉन्फ़िगर करना एक गलती है।
यदि आप एक होस्टिंग कंपनी का उपयोग कर रहे हैं तो आप किनारे को कॉन्फ़िगर नहीं कर सकते।
यदि आप डॉकर का उपयोग कर रहे हैं, तो एप्लिकेशन को स्वयं निहित होना चाहिए।

ध्यान दें कि कुछ उदाहरण उपयोग करते हैं connectHandlersलेकिन यह केवल डॉकर पर हेडर सेट करता है। का उपयोग करते हुए rawConnectHandlersकार्य किया (फोंट / सीएसएस / आदि) सभी परिसंपत्तियों पर लागू होता है।

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

यह ब्राउजर नीति जैसे कि फ्रेमिंग आदि को देखने का एक अच्छा समय होगा ।

— माइकल कोल
स्रोत

0

यदि आप नोड का उपयोग करते हैं, तो सर्वर में मूल का उपयोग जोड़ें ...

इस तरह

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

हमें उत्पत्ति के लिए प्रतिक्रिया चाहिए

— दक्ष पटेल
स्रोत

-5

हेरोकू के लिए काम करने का समाधान यहाँ है http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (उद्धरण अनुसरण करें):

नीचे बिल्कुल वही है जो आप कर सकते हैं यदि आप हर्को में अपना रेल एप्लिकेशन चला रहे हैं और अपने सीडीएन के रूप में क्लाउडफ्रंट का उपयोग कर रहे हैं। यह रूबी 2.1 + रेल्स 4, हरोकू सीडर स्टैक पर परीक्षण किया गया था।

फ़ॉन्ट संपत्ति में कॉर्स HTTP हेडर (एक्सेस-कंट्रोल- *) जोड़ें

रत्न font_assetsको रत्न से जोड़ें ।
bundle install
जोड़े config.font_assets.origin = '*'को config/application.rb। यदि आप अधिक दानेदार नियंत्रण चाहते हैं, तो आप विभिन्न मूल मानों को अलग-अलग वातावरण में जोड़ सकते हैं, जैसे,config/config/environments/production.rb
curl -I http://localhost:3000/assets/your-custom-font.ttf
हेरोकू के लिए कोड पुश करें।

CORS HTTP हेडर को अग्रेषित करने के लिए Cloudfront कॉन्फ़िगर करें

क्लाउडफ्रंट में, "व्यवहार" टैब के तहत, अपने वितरण का चयन करें, अपने फोंट वितरण को नियंत्रित करने वाली प्रविष्टि का चयन करें और संपादित करें (सबसे सरल रेल एप्लिकेशन के लिए आपके पास यहां केवल 1 प्रविष्टि है)। बदलें फॉरवर्ड हेडर "Whilelist" के लिए "कोई नहीं" से। और निम्नलिखित हेडर को श्वेतसूची में जोड़ें:

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

इसे बचाओ और यह बात है!

कैविएट: मैंने पाया कि कभी-कभी फ़ायरफ़ॉक्स फोंट को ताज़ा नहीं करेगा भले ही कॉर्स त्रुटि हो गई हो। इस मामले में फ़ायरफ़ॉक्स को समझाने के लिए पृष्ठ को कुछ समय ताज़ा करते रहें कि आप वास्तव में निर्धारित हैं।

— mihserf
स्रोत

4

कृपया लिंक-केवल उत्तरों से बचें। यह उपयोगी होगा यदि आप अपने लेख में प्रासंगिक स्निपेट को लिंक किए गए लेख से कॉपी कर सकते हैं। धन्यवाद।

— bPratik