آموزش رفع خطای Access-Control-Allow-Origin – CORS origin

حتما این مشکل براتون پیش اومده که بخشی از منابع وبسایتتون مثل فونت ها، فایل های CSS و یا فایل های جاوا اسکریپت لود نمیشن. اگه در گوگل کروم کنسول بررسی کنین، متوجه میشین که این منابع توسط مرورگر مسدود شده. این بخاطر تداخل در ریشه فایل در پروتکل https هست.

خطایی که مرورگر بهتون نشون میده:

font from origin 'https://domain.com/fonts/Byekan.ttf' has been blocked from loading by Cross-Origin Resource Sharing Policy: No 'Access-Control-ALlow-Origin' header is present on the required resource. Origin 'https://domain.com/fonts/Byekan.ttf' is therefore not allowed access.

حهت رفع خطای Access-Control-Allow-Origin – CORS origin می تونین به سادگی کد زیر رو به فایل .htaccess اضافه کنین. اگه فایل .htaccess وجود نداره، این فایل رو در پوشه اصلی وبسایت یا public_html ایجاد کنین و کد زیر رو به اون اضافه کنین:

<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

این کد مشکل شما رو به راحتی رفع می کنه.

بروزرسانی:

اگه فقط می خواین مشکل رو در خود مرورگر حل کنین (مرورگر گوگل کروم)، می تونین از افزونه Allow-Control-Allow-Origin: * استفاده کنین.