ক্রস-অরিজিন রিসোর্স শেয়ারিং নীতি দ্বারা উত্স থেকে ফন্টটি লোড করা থেকে অবরুদ্ধ করা হয়েছে

159

আমি বেশ কয়েকটি ক্রোম ব্রাউজারগুলিতে নীচের ত্রুটিটি পেয়েছি তবে সব নয়। এই মুহুর্তে সমস্যাটি কী তা সম্পূর্ণরূপে নিশ্চিত নয়।

ক্রস-অরিজিন রিসোর্স শেয়ারিং নীতি দ্বারা ' https://ABCDEFG.cloudfront.net ' উত্স থেকে ফন্টটি লোড করা থেকে অবরুদ্ধ করা হয়েছে: অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-অলজন-অরিজিন' শিরোনাম উপস্থিত নেই। মূল ' https://sub.domain.com ' এ অ্যাক্সেসের অনুমতি নেই।

এস 3-তে আমার নিম্নলিখিত সিওআরএস কনফিগারেশন রয়েছে

<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

ক্লাউডফ্রন্ট / এস 3 এর অন্যান্য সমস্ত অনুরোধ জেএস ফাইলগুলি সহ সঠিকভাবে কাজ করে।

amazon-web-services  amazon-s3  cors  amazon-cloudfront 
— ডালাস ক্লার্ক
সূত্র
5
আমারও একই সমস্যা হচ্ছে ... আমি ক্রোম 37.0.2062.94 এ আপগ্রেড করার পরে এটি লক্ষ্য করা শুরু করেছি
— কিরলি
সিওআরএস কনফিগারেশন আপডেট করার পরে, আমি সম্পদের নাম পরিবর্তন করে এটিকে কাজ করতে পরিচালিত করেছি। সুতরাং 1) সিওআরএস কনফিগারেশন কেবল ফাইল তৈরিতে প্রয়োগ করা হয় (আপডেট নয়) বা 2) সিওআরএস কনফিগারেশনটি ক্লাউডফ্রন্টে ক্যাশে করা হয়। আমি এটি উত্তর হিসাবে পোস্ট করব যদি অন্যরা নিশ্চিত করতে পারে যে এটি তাদের জন্যও কাজ করে।
— ডালাস ক্লার্ক
1
এটি কেবল ক্রোম বনাম 37.0.2062.94 এর সাথে লক্ষ্য করেছে তবে পূর্ববর্তী সংস্করণ নয়। আমার কাছে এস 3-তে মোটেও একটি কর্স কনফিগারেশন নেই, তাই এটি হওয়া উচিত নয়, তাই না?
— ঘোপার 21
1
@ ঘোপার 21 আপনার সঠিক সিওআরএস কনফিগারেশন দরকার। ফায়ারফক্সে পরীক্ষা এবং এটি আপনাকে (সম্ভবত) একই ফলাফল দেবে।
— টিম ডিজিগিনস
1
@ রিচপেক - এস 3-তে সঠিক সিওআরএস কনফিগারেশন যুক্ত করে ঠিক করুন (বা যদি স্বয়ংক্রিয়ভাবে উত্স থেকে আপনার সিডিএন তৈরি করা হয় তবে এটি কিছুটা জটিল - আপনাকে উপযুক্ত শিরোনাম যুক্ত করতে হবে, তবে আপনার ক্যাশেড ফন্টগুলি অকার্যকর করতে হবে) ... stackoverflow.com / প্রশ্নগুলি / 12229844 /… আরও তথ্যের জন্য নীচের উত্তর দেখুন
— টিম ডিজিগিনস

উত্তর:

87

আপনার .htaccess এ এই নিয়ম যুক্ত করুন

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

আরও ভাল, @ ডেভিড থোমাসের পরামর্শ অনুসারে আপনি একটি নির্দিষ্ট ডোমেন মান ব্যবহার করতে পারেন, যেমন

Header add Access-Control-Allow-Origin "your-domain.com"
— জিওভান্নি ডি গ্রেগরিও
সূত্র
1
হাই, এর সাথে তফাত কী Header set Access-Control-Allow-Origin "*"? ধন্যবাদ
— NineCattoRules
8
উইন্ডোজ লোকের জন্য, << নাম = "অ্যাক্সেস-কন্ট্রোল-অরিজিন-অরিজিন" মান = "*" /> কে ওয়েবকন্টফাইগ ফাইলে <কাস্টমহাইডার্স> এর অধীনে সেট করুন। আপনার দিনটি
— শুভ হোক
2
@ সিমোন পার্থক্যটি হ'ল "অ্যাড" দিয়ে প্রতিক্রিয়া শিরোনামটি বিদ্যমান শিরোলেখগুলির বিদ্যমান সেটটিতে যুক্ত করা হয়, যদিও এই শিরোলেটি ইতিমধ্যে বিদ্যমান রয়েছে। এর ফলস্বরূপ দুটি (বা আরও) শিরোনাম একই নামযুক্ত হতে পারে; যদিও "সেট" দিয়ে প্রতিক্রিয়া শিরোনাম সেট করা আছে, পূর্বের কোনও শিরোনামকে এই নামের সাথে প্রতিস্থাপন করুন। এই ক্ষেত্রে একই কারণ * তাদের সমস্ত অন্তর্ভুক্ত।
— জিওভান্নি ডি গ্রেগরিও
@ জিওভান্নি ডিগ্রিগরিও সুন্দর তথ্যের জন্য ধন্যবাদ!
— NineCattoRules
21
যে Access-Control-Allow-Origin "*"কোনও ডোমেইন থেকে জাভাস্ক্রিপ্ট অ্যাক্সেসের জন্য ডোমেনটি খোলে কেবল উল্লেখ করা সম্ভাব্যরূপে সুরক্ষিত। পরিবর্তে আপনার একটি নির্দিষ্ট ডোমেন মান ব্যবহার করা উচিত, উদাহরণস্বরূপ একটি ভাল ব্যাখ্যার জন্য stackoverflow.com/a/10636765/583715Access-Control-Allow-Origin "http://example1.com" দেখুন ।
— ডেভিড থমাস
59

ফায়ারফক্স যেমন https://code.google.com/p/chromium/issues/detail?id=286681 করেছে সে হিসাবে ক্রোম সেপ্টেম্বর / অক্টোবর ২০১৪ সাল থেকে ফন্টগুলিকে একই সিওআরএস পরীক্ষার বিষয়বস্তু করে । Https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/blink-dev/TT9D5-Zfnzw এ এ নিয়ে আলোচনা আছে

ফন্টের জন্য ব্রাউজারটি প্রাকফ্লাইট চেক করতে পারে , তবে আপনার এস 3 নীতিতে কর্স অনুরোধ শিরোনামেরও দরকার । আপনি নিজের পৃষ্ঠাটি সাফারি (যা বর্তমানে ফন্টগুলির জন্য CORS চেকিং করেন না) এবং ফায়ারফক্স (যা করে) ডাবল চেক করার জন্য এটি পরীক্ষা করতে পারেন যা বর্ণিত সমস্যা।

আমাজন এস 3 সিওআরএস (ক্রস-অরিজিন রিসোর্স ভাগ করে নেওয়া) এবং ফায়ারফক্স ক্রস-ডোমেন ফন্ট লোড করার জন্য অ্যামাজন এস 3 সিওআর বিশদের জন্য স্ট্যাক ওভারফ্লো উত্তর দেখুন answer

সাধারণভাবে এনবি কারণ এটি কেবল ফায়ারফক্সে প্রয়োগ করত তাই এটি ক্রোমের চেয়ে ফায়ারফক্সের অনুসন্ধানে সহায়তা করতে পারে।

— টিম ডিজিগিনস
সূত্র
এই উত্তরের জন্য ধন্যবাদ, দেখে মনে হচ্ছে এটি অন্য অনেকের পক্ষে সমস্যা হতে পারে। যদিও আমার সমস্যা ক্রোমের একটি স্থিতিশীল বিল্ডে ঘটেছিল।
— ডালাস ক্লার্ক
45
ক্রোমে এটি এখন ঘটছে।
— justingordon
লোকেরা এই উত্তরে (নিজেকে সহ!) উল্লেখ করতে থাকায়, আমি এটিকে আজকের তুলনায় কম historicalতিহাসিক এবং আরও প্রাসঙ্গিক করে তুলেছি।
— টিম ডিজিগিনস 21'15
1
এছাড়াও এফওয়াইআই আমি আবিষ্কার করেছি যে ক্রস-অরিজিন রিসোর্স শেয়ারিং নীতি দ্বারা একটি ত্রুটি বার্তা "লোড করা থেকে ব্লক করা হয়েছে: অনুরোধকৃত উত্সটিতে কোনও 'অ্যাক্সেস-কন্ট্রোল-অলজন-অরিজিন' শিরোনাম উপস্থিত নেই Orig অরিজিন" আসলে খারাপ ছিল আমার মূল সার্ভারে একটি ফন্ট ফাইলের পথ এবং ক্লাউডফ্রন্টের পরে আমার সার্ভারের হোমপেজে পুনঃনির্দেশ করা হবে (এবং হয় পুনঃনির্দেশ প্রতিক্রিয়া বা হোমপেজে CORS শিরোনাম নেই)। বিভ্রান্তিকর, তবে প্রকৃত ফন্ট ফাইলের সঠিক পথ ব্যবহার করে সমাধান করা হয়েছে (কোনও সিওআরএস সমস্যা নয়, কঠোরভাবে কথা বলছেন)।
— টিম ডিজিগিনস 21'15
আরে @ ডালাসক্লার্ক, আপনি আপনার প্রশ্নের জন্য একটি গ্রহণযোগ্য উত্তর চয়ন করতে পারেন। ধন্যবাদ টিম, আপনার লিঙ্ক এবং ব্যাখ্যা আমার অভিজ্ঞতায় সহায়ক ছিল। চিয়ার্স।
— ড্যান
46

আমি কেবল <AllowedMethod>HEAD</AllowedMethod>এস 3 বালকের সিওআরএস নীতিতে যুক্ত করে সমস্যার সমাধান করতে সক্ষম হয়েছি ।

উদাহরণ:

<?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>বালতিতে আমার সিওআরএস নীতিতে যুক্ত করেছি এবং এটি এখনও কাজ করছে না।
— সালভাতোর আইভেন
সাধারণত না, এটি সর্বোচ্চ গ্রহণ করা উচিত। কয়েক মিনিট
— Özer এস
30

nginx:

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

এডাব্লুএস এস 3:

  1. আপনার বালতি নির্বাচন করুন
  2. ডানদিকের উপরের বৈশিষ্ট্যগুলিতে ক্লিক করুন
  3. অনুমতি => সম্পাদনা কর্স কনফিগারেশন => সংরক্ষণ করুন
  4. সংরক্ষণ

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

— ইয়ানিভ ভোভা অল্টারম্যান
সূত্র
এটি যুক্ত করার পরে, 404 পাওয়া যায় নি।
— নিওবি
12

২ June শে জুন, ২০১৪ এডাব্লুএস যথাযথ ভ্যারি প্রকাশ করেছে: ক্লাউডফ্রন্টে মূল আচরণ তাই এখন আপনি ঠিক

আপনার এস 3 বালতির জন্য একটি কর্স কনফিগারেশন সেট করুন:

<AllowedOrigin>*</AllowedOrigin>

ক্লাউডফ্রন্টে -> বিতরণ -> এই উত্সটির জন্য আচরণগুলি, ফরোয়ার্ড শিরোনামগুলি: শ্বেতলিস্ট বিকল্পটি ব্যবহার করুন এবং 'অরিজিন' শিরোনামটি সাদা করুন।

ক্লাউডফ্রন্ট নতুন বিধি প্রচার করার সময় ~ 20 মিনিটের জন্য অপেক্ষা করুন

এখন আপনার ক্লাউডফ্রন্ট বিতরণে বিভিন্ন ক্লায়েন্ট অরিজিনের শিরোনামগুলির জন্য বিভিন্ন প্রতিক্রিয়া (যথাযথ 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/

এর সংক্ষিপ্ত সংস্করণটি হ'ল:

  1. এস 3 সিআরএস কনফিগারেশন সম্পাদনা করুন (আমার কোডের নমুনাটি সঠিকভাবে প্রদর্শিত হয়নি)
    দ্রষ্টব্য: এটি ইতিমধ্যে মূল প্রশ্নে সম্পন্ন হয়েছে
    দ্রষ্টব্য: প্রদত্ত কোডটি খুব সুরক্ষিত নয়, লিঙ্কযুক্ত পৃষ্ঠায় আরও তথ্য।
  2. আপনার বিতরণের "আচরণ" ট্যাবে যান এবং সম্পাদনা করতে ক্লিক করুন
  3. "ফরওয়ার্ড শিরোলেখগুলি" "কোনওটিই নয় (ক্যাশে উন্নত করে)" থেকে "শ্বেত তালিকাতে" এ পরিবর্তন করুন।
  4. "হোয়াইটলিস্ট শিরোনাম" তালিকায় "উত্স" যুক্ত করুন
  5. পরিবর্তনগুলি সংরক্ষণ করুন

আপনার ক্লাউডফ্রন্ট বিতরণ আপডেট হবে, যা প্রায় 10 মিনিট সময় নেয়। এর পরে, সব ঠিকঠাক হওয়া উচিত, আপনি ব্রাউজার থেকে সিওআর সম্পর্কিত ত্রুটি বার্তাগুলি চলে গেছে তা যাচাই করে যাচাই করতে পারেন।

— agbodike
সূত্র
2

মাইক্রোসফ্ট পণ্যগুলি একটি ওয়েবকনফাইগ ফাইল সহ ব্যবহার করে তাদের জন্য:

আপনার ওয়েব কনফিগের সাথে এটি মার্জ করুন।

যে কোনও ডোমেনের 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>

যদি আপনার ওয়েবকনফিগ সম্পাদনা করার অনুমতি না থাকে তবে আপনার সার্ভার-পাশের কোডটিতে এই লাইনটি যুক্ত করুন।

Response.AppendHeader("Access-Control-Allow-Origin", "domain");
— নিউ এভারেস্ট
সূত্র
আমাদের উইন্ডোজ ব্যবহারকারীদের মনে রাখার জন্য একটি ভোট গ্রহণের প্রয়োজন।
— মোহর্তান
আমি এসপ নেট কোর ব্যবহার করছি, আমি কীভাবে এটিকে appsettings.json ফাইলটিতে যুক্ত করব?
— ইউসুফ সোদিক
1

এখানে একটি সুন্দর লেখার ব্যবস্থা আছে ।

এটিকে এনজিঙ্ক্স / অ্যাপাচি কনফিগার করা একটি ভুল।
আপনি যদি কোনও হোস্টিং সংস্থা ব্যবহার করছেন তবে আপনি প্রান্তটি কনফিগার করতে পারবেন না।
আপনি যদি ডকার ব্যবহার করে থাকেন তবে অ্যাপটি স্বয়ংসম্পূর্ণ হওয়া উচিত।

নোট করুন যে কয়েকটি উদাহরণ ব্যবহার করে 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

আপনি যদি সার্ভার হিসাবে node.js ব্যবহার করেন তবে কেবলমাত্র উত্সের ব্যবহার যুক্ত করুন ...

এটার মত

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

আমাদের উত্স জন্য প্রতিক্রিয়া প্রয়োজন

— দক্ষিণ প্যাটেল
সূত্র
-5

Heroku জন্য কাজ সমাধান এখানে http://kennethjiang.blogspot.com/2014/07/set-up-cors-in-cloudfront-for-custom.html (উদ্ধৃতি অনুসরণ):

নীচে হিরোকুতে আপনার রেলস অ্যাপটি চালাচ্ছেন এবং ক্লাউডফ্রন্টকে আপনার সিডিএন হিসাবে ব্যবহার করছেন যদি আপনি ঠিক কী করতে পারেন is এটি রুবি ২.১ + রেলস ৪, হিরোকু সিডার স্ট্যাকে পরীক্ষা করা হয়েছিল।

ফন্ট সম্পদে CORS HTTP শিরোনাম (অ্যাক্সেস-নিয়ন্ত্রণ- *) যুক্ত করুন Add

  • রত্নটি 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 শিরোনাম ফরোয়ার্ড করার জন্য ক্লাউডফ্রন্টটি কনফিগার করুন

ক্লাউডফ্রন্টে, "বিতরণ" ট্যাবের অধীনে আপনার বিতরণটি নির্বাচন করুন, আপনার ফন্ট বিতরণকে নিয়ন্ত্রণ করে এমন এন্ট্রি নির্বাচন করুন এবং সম্পাদনা করুন (সর্বাধিক সাধারণ রেল অ্যাপের জন্য আপনার এখানে কেবলমাত্র 1 টি প্রবেশ রয়েছে)। পরিবর্তন ফরোয়ার্ড শিরোলেখ "Whilelist" থেকে "কিছুই না" থেকে। এবং হোয়াইটলিস্টে নিম্নলিখিত শিরোনামগুলি যুক্ত করুন:

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

এটি সংরক্ষণ করুন এবং এটিই!

ক্যাভেট: আমি দেখতে পেয়েছি যে অনেক সময় ফায়ারফক্স সিওআরএস ত্রুটি চলে গেলেও ফন্টগুলি রিফ্রেশ করে না। এক্ষেত্রে ফায়ারফক্সকে বোঝাতে আপনি কিছুটা দৃ determined়প্রতিজ্ঞ হয়ে কয়েক বার পৃষ্ঠাটি সতেজ রাখুন।

— mihserf
সূত্র
4
শুধুমাত্র লিংক-উত্তরগুলি এড়ান। আপনি যদি উত্তরটিতে লিঙ্কিত নিবন্ধ থেকে প্রাসঙ্গিক স্নিপেটগুলি অনুলিপি করতে পারেন তবে এটি সহায়ক হবে। ধন্যবাদ।
— বিপ্রতিক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.