অ্যামাজন এস 3 সিওআরএস (ক্রস-অরিজিন রিসোর্স শেয়ারিং) এবং ফায়ারফক্স ক্রস-ডোমেন ফন্ট লোড হচ্ছে


134

ফায়ারফক্সের বর্তমান ওয়েবপৃষ্ঠার চেয়ে বিভিন্ন উত্স থেকে ফন্ট লোড না করা নিয়ে দীর্ঘদিন ধরেই সমস্যা রয়েছে। সাধারণত, যখন ফন্টগুলি সিডিএনতে দেওয়া হয় তখন বিষয়টি উত্থাপিত হয়।

অন্যান্য প্রশ্নের বিভিন্ন সমাধান উত্থাপিত হয়েছে:

সিএসএস @ ফন্ট-ফেস ফায়ারফক্সের সাথে কাজ করছে না, তবে ক্রোম এবং আইইয়ের সাথে কাজ করছে

অ্যামাজন এস 3 সিওআরএস প্রবর্তনের সাথে সাথে ফায়ারফক্সে ফন্ট লোডিংয়ের সমস্যা সমাধানের জন্য সিওআরএস ব্যবহার করে কোনও সমাধান পাওয়া যায়?

সম্পাদনা করুন: S3 CORS কনফিগারেশনের একটি নমুনা দেখতে পারা দুর্দান্ত লাগবে।

সম্পাদনা 2: আমি আসলে এটি কী করে তা না বুঝেই একটি কাজের সমাধান পেয়েছি। যদি কেউ কনফিগারেশনের অ্যামাজনের ব্যাখ্যাতে কনফিগারগুলি এবং ব্যাকগ্রাউন্ড ম্যাজিক সম্পর্কে আরও বিস্তারিত ব্যাখ্যা সরবরাহ করতে পারে তবে এনজিফনাব যেমন এটির জন্য একটি অনুগ্রহ রেখেছিলেন, এটির প্রশংসা হবে।

উত্তর:


148

আপডেট সেপ্টেম্বর 10, 2014:

ক্লাউডফ্রন্ট এখন সঠিকভাবে CORS সমর্থন করে যেহেতু নীচে আপনার আর কোয়েরি স্ট্রিং হ্যাকের কিছু করার দরকার নেই। দেখুন http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ এবং আরও তথ্যের জন্য এই উত্তর: https://stackoverflow.com/a/25305915/308315


ঠিক আছে, অবশেষে ডকুমেন্টেশনের উদাহরণ থেকে সামান্য টুইট করে নীচের কনফিগারেশনটি ব্যবহার করে ফন্টগুলি পেয়েছি।

আমার ফন্টগুলি এস 3 এ হোস্ট করা হয়েছে তবে ক্লাউডফ্রন্ট দ্বারা ফ্রন্ট করা হয়েছে।

আমি নিশ্চিত না কেন এটি কাজ করে, আমার অনুমান সম্ভবত এটি <AllowedMethod> GETএবং <AllowedHeader> Content-*প্রয়োজন।

অ্যামাজন এস 3 সিওআরএস কনফিগারেশনে দক্ষ কেউ যদি এই বিষয়ে কিছু আলোকপাত করতে পারেন তবে এটি প্রশংসিত হবে।

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

সম্পাদনা:

কিছু বিকাশকারী ক্লাউডফ্রন্টের শিরোনামটিকে ক্যাশে দেওয়ার সমস্যার মুখোমুখি হচ্ছে Access-Control-Allow-Origin। এই সমস্যাটি অ্যাডাব্লুএস কর্মীরা লিঙ্কটিতে সম্বোধন করেছেন ( https://forums.aws.amazon.com/thread.jspa?threadID=114646 নীচের ) করেছেন, @ জেফ-অ্যাটউড মন্তব্য করেছেন wood

লিঙ্কযুক্ত থ্রেড থেকে, এটি একটি কাজের স্ট্রিং ব্যবহার করার পরামর্শ দেওয়া হয়েছে work বিভিন্ন ডোমেনের কলগুলির মধ্যে পার্থক্য করার জন্য । আমি এখানে সংক্ষিপ্ত উদাহরণ পুনরুত্পাদন করব।

ব্যবহার curlপ্রতিক্রিয়া শিরোনাম পরীক্ষা করতে :

ডোমেন এ: a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

ডোমেন এ থেকে প্রতিক্রিয়া শিরোনাম:

Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

ডোমেন বি: b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

ডোমেন বি থেকে প্রতিক্রিয়া শিরোনাম:

Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

আপনি লক্ষ্য করবেন যে Access-Control-Allow-Originবিভিন্ন মান ফিরে এসেছে, যা ক্লাউডফ্রন্টের ক্যাচিংয়ের অতীত হয়ে গেছে।


2
আপনি এখানে বর্ণিত মতামত সম্পর্কিত সমস্যার মুখোমুখি হয়েছেন - Access-Control-Allow-Originশিরোনামটি ক্যাশ করে সিআরএসকে অকার্যকর করে দেয় যখন পরবর্তী সাবডোমেনের মাধ্যমে পরবর্তী অনুরোধ করা হয়?
ওভ

1
@ov আমি সমস্যাটি অনুভব করি না কারণ আমি স্পষ্টভাবে সংস্থানগুলি ব্যবহার করে এমন ডোমেনগুলি সেট করেছি। আপনি পোস্ট করা লিঙ্কটি আগে পড়েছি। আমি অস্পষ্টভাবে অন্য থ্রেডের কিছু উত্তরগুলি স্মরণে রেখেছিলাম যে ডোমেনগুলি স্পষ্ট করে বলতে হবে, সুতরাং কিছু নিষেধাজ্ঞার কারণে << অনুমোদিত অরগিন> * << অনুমোদিত অরগিন> আসলে অনুমোদিত নয় allowed আমি এখন এই উত্তর পোস্টগুলি খুঁজে পাচ্ছি না, এটি অন্য কোথাও পড়া ব্লগ পোস্ট হতে পারে। আশা করি এইটি কাজ করবে.
ভেকেন

3
আপনার একটি সিওআরএসআল উপাদানগুলির মধ্যে একাধিক অনুমোদিত অরগিন উপাদান থাকতে পারে, যাতে আপনি সেই সিআরএসআরুলসগুলিকে একক উপাদানে একত্রিত করতে পারেন, কারণ সেগুলির মধ্যে অন্যান্য উপাদানগুলি অভিন্ন।
বেন হাল

4
@ এডন যদি এস 3 বালতি ক্লাউডফ্রন্ট পরিবেশন করে থাকে তবে মনে হচ্ছে উত্তরটি ডমিনের দ্বারা ফন্টের ক্যোরিস্ট্রিংয়ের পরিবর্তে
জেফ

2
এটি একটি চরম হতাশার বিষয় হয়ে দাঁড়িয়েছে। সুসংবাদটি হ'ল এস 3 এখন সঠিক কাজ করছে বলে মনে হচ্ছে, তাই কমপক্ষে ক্লাউডফ্রন্টের মাধ্যমে ওয়েবফন্ট ব্যতীত অন্য যে কোনও কিছু দেওয়া এবং সরাসরি এস 3 থেকে ফন্ট ফাইলগুলি পরিবেশন করা সম্ভব। দুঃখের বিষয়, ক্যুরিস্টিং হ্যাকটি আরও উল্লেখযোগ্য রিফ্যাক্টরিং ছাড়াই আমাদের প্রয়োগে সত্যিকার অর্থে ব্যবহারিক নয়, কারণ সম্পদগুলি সমস্তই রেল অ্যাসেট পাইপলাইনের মাধ্যমে পরিবেশন করা হয়, এবং অনুরোধের সময় সম্পদ URL গুলোকে টুইঙ্ক করার কোনও সুবিধাজনক উপায় নেই (এগুলি সব স্থাপনার সময় উত্পন্ন হয়) যখন সম্পদগুলি পূর্বনির্ধারিত হয়)। সিএসএস-এ ফন্টের ইউআরএল ইতিমধ্যে এস 3 এ রয়েছে।
Zach Lipton

97

কিছু টুইট করার পরে আমি মনে করি এটি কোয়েরি স্ট্রিং হ্যাক ছাড়াই কাজ করেছে। এখানে আরও তথ্য: http://docs.aws.amazon.com/AmamaonCloudFront/latest/DeveloperGuide/RequestAndResponseBehavierS3Origin.html#RequestS3-cors

আমি আমার পুরো সেটআপটি দিয়ে যাচ্ছি যাতে আমি কী করেছি তা সহজেই দেখা যায়, আশা করি এটি অন্যকে সহায়তা করে।

পটভূমির তথ্য: আমি একটি রেল অ্যাপ্লিকেশন ব্যবহার করছি যা এস 3-এ সম্পদ রাখার জন্য asset_sync রত্ন রয়েছে। এর মধ্যে হরফ রয়েছে।

এস 3 কনসোলের মধ্যে আমি আমার বালতি, বৈশিষ্ট্য এবং 'সম্পাদনা কর্স কনফিগারেশন' এ এখানে ক্লিক করেছি: CORS কনফিগার বোতাম

টেক্সেরিয়ার ভিতরে আমার এমন কিছু রয়েছে:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://*.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

তারপরে ক্লাউডফ্রন্ট প্যানেলে ( https://console.aws.amazon.com/cloudfront/home ) আমি একটি বিতরণ তৈরি করেছি, এমন একটি উত্স যুক্ত করেছি যা আমার এস 3 বালতিতে নির্দেশ করেছে একটি উত্স যোগ

তারপরে S3 ভিত্তিক উত্স আমি সেটআপে নির্দেশ করতে একটি ডিফল্ট পাথের জন্য একটি আচরণ যুক্ত করল। আমি যা করেছি তা হ'ল হোয়াইটলিস্ট শিরোনামগুলিতে ক্লিক করে যুক্ত করা হয়েছিল Origin: একটি আচরণ এবং শ্বেতলিস্ট শিরোলেখ যোগ করা

এখন যা ঘটে তা হ'ল নিম্নলিখিতটি, যা আমি বিশ্বাস করি সঠিক:

1) পরীক্ষা করুন যে এস 3 হেডারগুলি সঠিকভাবে সেট করা হচ্ছে

curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3

2) চেক ক্লাউডফ্রন্ট শিরোনামগুলির সাথে কাজ করে

curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==

(মনে রাখবেন উপরেরটি ক্লাউডফ্রন্ট থেকে মিস ছিল কারণ এই ফাইলগুলি 180 সেকেন্ডের জন্য ক্যাশে করা হয়েছে তবে একইগুলি হিট-এ কাজ করছে)

3) ভিন্ন উত্সের সাথে ক্লাউডফ্রন্টটি হিট করুন (তবে একটি যা এস 3 বাল্টির জন্য সিওআরএসে অনুমোদিত) - এটি Access-Control-Allow-Originক্যাশেড নয়! হ্যাঁ!

curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==

উপরে নোট করুন যে ডোমেনটি কোয়েরি স্ট্রিং হ্যাক ছাড়াই সাফল্যের সাথে পরিবর্তিত হয়েছে।

আমি যখন অরিজিন শিরোনাম পরিবর্তন করি তখন X-Cache: Miss from cloudfrontপ্রথম অনুরোধটিতে সর্বদা একটি মনে হয় তারপরে আমি প্রত্যাশাকে পেয়ে যাইX-Cache: Hit from cloudfront

পিএস এটি লক্ষণীয় যে কার্ল- I (মূলধন I) করার সময় অ্যাক্সেস-নিয়ন্ত্রণ-অনুমোদন-অরিজিনের শিরোনামগুলি কেবলমাত্র একটি প্রধান হিসাবে দেখাবে না, আমি এটি জিইটি তৈরি করতে এবং স্ক্রোল আপ করতে করব i


অন্যরা সবাই যখন কাজ না করে তখন কাজ করেছিল। এমন বিস্তারিত পোস্টে সময় দেওয়ার জন্য ধন্যবাদ!
iwasrobbed

এটি কাজ করে !! এফওয়াইআই - এটি পরীক্ষা করার সময় আমার কাছে বিশাল পোস্টের প্রতিক্রিয়া পাঠ্য ছিল ... এই কার্ল সমাধানটি ব্যবহার করার জন্য উত্তরটি সম্পাদনা করতে চলেছে ... স্ট্যাকওভারফ্লো
মাইকেল গোরহাম

ভাল ধন্যবাদ ছেলেরা - এটি অন্যের জন্য কাজ করে দেখে আনন্দিত।
ইমন গহন

আপনি আমাদের কতটা সাহায্য করেছেন তা আমি বলতে পারি না! +1
কিছুই-বিশেষ-এখানে

1
Originদর্শকদের কাছ থেকে গ্রাহক শিরোনাম যুক্ত করার জন্য +1 যাতে ক্লাউডফ্রন্ট সেই শিরোলেখের উপর ভিত্তি করে অবজেক্টটিকে ক্যাশে করে (এবং সার্ভারের সিওআরএস শিরোনামটি ব্যবহারকারীর কাছে ফরোয়ার্ড করে)
সাবস্টিয়ান সাউনিয়ার

13

আমার ফন্টগুলি হিরোকুর শেষ ধাক্কা না দেওয়া পর্যন্ত সঠিকভাবে পরিবেশন করা হয়েছিল ... কেন তা আমি জানি না, তবে সিওআরএস-এর ওয়াইল্ডকার্ড মূলত কাজ করা বন্ধ করে দিয়েছে। আমি আমার সমস্ত প্রিপ্রো এবং প্রো ডোমেনগুলি বালতি সেটিং-এ সিওআরএস নীতিতে যুক্ত করেছি সুতরাং এখন এটির মতো দেখাচ্ছে:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>https://prepro.examle.com</AllowedOrigin>
        <AllowedOrigin>http://examle.com</AllowedOrigin>
        <AllowedOrigin>https://examle.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>

</CORSConfiguration>

আপডেট: http://localhost:PORTআপনারও যোগ করুন


1
এই সমাধান ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ। এটি আমার পক্ষে কাজ করেছে।
রায়ান মন্টগোমেরি

8

ঠিক আছে, ডকুমেন্টেশনে বলা হয়েছে যে আপনি "আপনার বালতিতে কর্স সাবসোর্স" হিসাবে কনফিগারেশনটি আটকে রাখতে পারেন। আমি এটি গ্রহণ করার অর্থ এটি দিয়েছিলাম যে আমি আমার বালতিটির মূলটিতে কনফিগারেশন সহ "কর্স" নামে একটি ফাইল তৈরি করব, তবে এটি কার্যকর হবে না। শেষ পর্যন্ত আমাকে অ্যামাজন এস 3 প্রশাসনের অঞ্চলে লগইন করতে হয়েছিল এবং propertiesআমার বালতির সংলাপের মধ্যে কনফিগারেশন যুক্ত করতে হয়েছিল ।

এস 3 আরও ভাল ডকুমেন্টেশন ব্যবহার করতে পারে ...


1
হ্যাঁ, তবে আমি সম্পত্তি প্যানেলে কিছু নতুন ইন্টারফেস পরিবর্তনগুলি ভাগ্যবান বলে মনে করি। আমি বালতি নীতিগুলি সম্পাদনা করছি, তাই স্বাভাবিকভাবেই আমি একই প্যানেলে সিওআরএস কনফিগারেশনটি অনুসন্ধান করি।
ভেকেন

আমার জন্য কাজ করেছেন, আমি এটি আমার অ্যাপ্লিকেশনটিতে সেট করতে চেয়েছিলাম, কে জানত যে এটি এত সহজ হবে
রিচলুইস

7

অ্যামাজন এস 3 কর্স কনফিগারেশনে (এস 3 বালতি / অনুমতি / সিওআরএস) আপনি যদি এটি ব্যবহার করেন:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

CORS জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলের জন্য ভাল কাজ করে তবে এটি ফন্ট ফাইলগুলির জন্য কাজ করে না

@ ভিকেন উত্তরে প্রকাশিত প্যাটার্নটি ব্যবহার করে আপনাকে সিওআরএসকে অনুমতি দেওয়ার জন্য আপনাকে ডোমেন নির্দিষ্ট করতে হবে: https://stackoverflow.com/a/25305915/618464

সুতরাং, এটি ব্যবহার করুন :

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

আপনার ডোমেনের জন্য "mydomain.com" প্রতিস্থাপন মনে রাখবেন।

এর পরে, ক্লাউডফ্রন্ট ক্যাশে (ক্লাউডফ্রন্ট / অবৈধকরণ / তৈরি অবৈধকরণ) অবৈধ করুন এবং এটি কাজ করবে।


6

আমার ক্ষেত্রে, আমি সিওআরএস কনফিগারেশনে এক্সএমএল নেমস্পেস এবং সংস্করণটি সংজ্ঞায়িত করিনি। যারা কাজ করেছেন তাদের সংজ্ঞা দিচ্ছেন।

পরিবর্তিত

<CORSConfiguration>

প্রতি

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">

আমার জন্য কাজ করে। আমার ফন্টগুলি বালতি নিজেই হোস্ট করা হয়।
খামেইলন

ডিফল্ট টেমপ্লেট কেন স্বয়ংক্রিয়ভাবে এটি অন্তর্ভুক্ত করে না।
কোটডমুস

4

একটি ভাল এবং সহজ উপায় আছে!

আমি ব্যক্তিগতভাবে এই সমস্যাটি সমাধানের জন্য আমার ডিএনএস সাবডোমেনগুলি ব্যবহার করতে পছন্দ করি। আমার সিডিএন যদি sdf73n7ssa.cloudfront.net এর পরিবর্তে cdn.myawesomeapp.com এর পিছনে থাকে তবে ব্রাউজারগুলি ক্র্যাক ডোমেন সুরক্ষা সমস্যা হিসাবে ফ্রিকআউট এবং এগুলি ব্লক করে না।

আপনার সাবডোমেনটি আপনার এডাব্লুএস ক্লাউডফ্রন্ট ডোমেনে দেখানোর জন্য এডাব্লুএস ক্লাউডফ্রন্ট নিয়ন্ত্রণ প্যানেলে যান, আপনার ক্লাউডফ্রন্ট বিতরণটি নির্বাচন করুন এবং আপনার সিডিএন সাবডোমেনটিকে বিকল্প ডোমেন নাম (সিএনএম) ক্ষেত্রে প্রবেশ করুন। Cdn.myawesomeapp.com এর মতো কিছু করবে।

এখন আপনি আপনার ডিএনএস সরবরাহকারীর কাছে যেতে পারেন (এডাব্লুএস রুট 53 এর মতো) এবং সিডিএন.মায়োওয়াল্প অ্যাপ.কমের জন্য সিডিএন তৈরি করতে পারেন sdf73n7ssa.cloudfront.net to

http://blog.cloud66.com/cross-origin-resource-sharing-cors-blocked-for-cloudfront-in-rails/


এটি এসএসএলকে ভেঙে দেয় বা এসএসএল করার জন্য এটি প্রচুর অর্থ ব্যয় করে তাই অনেক লোক এটি করে না।
পুরুষদের

4

এই কনফিগারেশনটি আমার পক্ষে কাজ করেছিল। আমি অবজেক্ট তালিকা, পুনরুদ্ধার, আপডেট এবং মুছতে পারেন।

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

আপনাকে ডোমেন পরিবর্তন করতে হবে, যেমন আমি লোকালহোস্ট থেকে পরীক্ষা করছিলাম, কেবল CORS এর জন্য এই পৃষ্ঠাটি দেখুন: ডকস.আও.স.ম্যাজন
শহীদ

1
<ifModule mod_headers.c>

   Header set Access-Control-Allow-Origin: http://domainurl.com

</ifModule>

সরল সমাধান


ভাগ করে নেওয়ার জন্য ধন্যবাদ! ক্লাউড স্টোরেজে স্থির সম্পদ আপলোড করার সময় এই শিরোলেখটিকে 'মেটা-ডেটা' হিসাবে যুক্ত করার জন্য আমাকে ধারণা দিয়েছেন । (যদিও এটি কেবল 1 বা এটির সাথেই কাজ করবে )particular domainall domains
বিনয় বিশ

0

আমার বসন্ত বুট অ্যাপ্লিকেশন (সার্ভার) পুনরায় চালু করা আমার জন্য সমস্যার সমাধান করেছে।

আমি এস 3-তে সঠিকভাবে সিওআর কনফিগার করেছি। কার্লটি মূল শিরোনামের সাথে সঠিক প্রতিক্রিয়া দিচ্ছিল। সাফারি ফন্টটি সঠিকভাবে আনছে। এটি কেবলমাত্র ক্রোম যারা সিওআরএস গ্রহণ করতে রাজি ছিল না।

ঠিক কী কারণে আচরণটি হয়েছিল তা নিশ্চিত নয়। ইফ-মডিফায়েড-এর সাথে অবশ্যই কিছু করার দরকার


0

এটি ফন্টের সাথে নয় তবে চিত্রগুলির সাথে সম্পর্কিত, এটি একটি প্রান্তের কেস হতে পারে, তবে এটি আমার ক্ষেত্রে যেমন ঘটেছিল, এটি অন্য কোনওটির সাথেও ঘটতে পারে। এটি কারও সাহায্য করবে এই আশায় আমি এটি এখানে রেখে যাব:

আপনি যদি এই দৃশ্যে থাকেন তবে "তারা যা বলেছে তা আমি করে ফেলেছি তবে এটি এখনও কার্যকর হবে না" সম্ভবত এটি ক্রোম এবং সাফারিতে ক্যাশে সম্পর্কিত সমস্যা। ধরা যাক আপনার সার্ভারে একটি সঠিক সিওআরএস কনফিগারেশন সেট রয়েছে:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
    </CORSRule>
</CORSConfiguration>

এবং ফায়ারফক্সে সবকিছু ঠিকঠাক কাজ করে তবে ক্রোম এবং সাফারিতে এটি কার্যকর হয় না। আপনি যদি কোনও সহজ ট্যাগ এবং জেএস চিত্রের উপাদান এসসিআর উভয় থেকে আপনার দূরবর্তী চিত্রের পাথের অ্যাক্সেস করে <img src="http://my.remote.server.com/images/cat.png">থাকেন তবে নীচের মত:

var myImg = new Image()
myImg.crossOrigin = 'Anonymous'
myImg.onload = () => {
  // do stuff (maybe draw the downloaded img on a canvas)
}
myImg.src = 'http://my.remote.server.com/images/cat.png'

আপনি No 'Access-Control-Allow-Origin'ক্রোম এবং সাফারিতে ত্রুটিটি পেতে পারেন । এটি ঘটেছিল কারণ প্রথম <img>কোনওভাবে ব্রাউজারের ক্যাশে বিশৃঙ্খলা সৃষ্টি হয় এবং আপনি যখন পরে একই চিত্রটি প্রবেশ করার চেষ্টা করছেন (কোড-ইন ইমেজ উপাদানটিতে) তখন তা সহজেই ভেঙে যায়। এড়াতে, আপনি ব্রাউজারটিকে চিত্রটির পুনরায় অনুরোধ করতে বাধ্য করতে এবং এর মতো ক্যাশে ব্যবহার করা এড়াতে, একটি .src পাথে একটি কল্পিত GET পরম যুক্ত করতে পারেন:

<img src="http://my.remote.server.com/images/cat.png?nocache=true"></img>

-1

হ্যা অবশ্যই. ফায়ারফক্স ফন্টগুলির জন্য সিওআরএসকে সমর্থন করে, যেমনটি অনুমান করা দরকার যেমন http://dev.w3.org/csswg/css3-fouts/#allowing-cross-origin-font-loading


আপনার তাত্ক্ষণিক প্রতিক্রিয়ার জন্য ধন্যবাদ, বরিস জবারস্কি। আপনি কি এস 3 সিওআরএস সেটিংসের জন্য কয়েকটি উদাহরণ কনফিগারেশন প্রদর্শন করতে সক্ষম হবেন?
ভিকেেন

আমি কখনই এস 3 কনফিগার করার দিকে নজর রাখিনি ... যতক্ষণ না এইচটিটিপি স্তরে কী পাঠাবেন, যদি আপনি ঠিক হয়ে থাকেন তবে হরফ ফাইলগুলির জন্য এইচটিটিপি প্রতিক্রিয়াতে কেবল "অ্যাক্সেস-নিয়ন্ত্রণ-অনুমতি দিন: *" প্রেরণ করা হচ্ছে কাজ করা উচিত.
বরিস জবারস্কি

ধন্যবাদ, আমি S3 CORS কনফিগারেশনের সাহায্যে ঠিক কীভাবে সেটিংটি করব তা জানার চেষ্টা করছি।
ভেকেন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.