آموزش رفع خطای 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 استفاده کنید.