آموزش رفع ارور Access-Control-Allow-Origin header در وردپرس

باسلام، امیدوارم حالتون خوب باشه

یکی از مشکلاتی که لود فونت ها در سایت های وردپرسی امکان دارد ایجاد شود ارور زیر می باشد:

rezarastegar.ir/:1 Access to font at ‘https://example.ir/wp-content/uploads/font.woff’ from origin ‘https://rastegar.info’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

اما این ارور دقیقا به چه چیزی اشاره می کند و ماهیت به وجود آمدن آن چیست و چطور می توان آن را رفع کرد؟ اینها سوالاتی است که پیرامون این موضوع به وجود می آید، امکان دارد تجربه زیادی نداشته باشید و با دیدن این ارور دست و پای خودتون رو گم که دیگه سایت تون دچار ایراد جدی شده! اما اصلا اینطور نیست و نگران نباشید. در ادامه به این موضوع میپردازم که اصلا چرا همچین اروری دریافت میکنیم و در پایان راه حل رفع اون رو به صورت ساده توضیح داده ام. با من همراه باشین😎🔥

ارور Access-Control-Allow-Origin دقیقا چیست؟

‘Access-Control-Allow-Origin’ به عنوان یک هدر HTTP استاندارد در پاسخ‌های سرور استفاده می‌شود. این هدر نشان می‌دهد که کدام دامنه‌ها مجاز به دسترسی به منبع مشخص در پاسخ  یا ریسپانس هستند. اگر این هدر در پاسخ سرور موجود نباشد یا دامنه مبدا در این هدر تعیین نشده باشد، مرورگر اجازه دسترسی به منبع را به علت مشکلات امنیتی نمی‌دهد و ارور CORS رخ می‌دهد.

CORS چیست؟

Cross-Origin Resource Sharing یا CORS، به معنی “اشتراک‌گذاری اطلاعات بین منابع مختلف” است. CORS یک مکانیسم HTTP می باشد که امکان اشتراک‌گذاری اطلاعات بین یک منبع با منبع دیگر را به صورت امن فراهم می‌کند. این مکانیسم برای ساده سازی same-origin policy در مرورگرهای مدرن استفاده می شود. دو URL زمانی که پروتکل‌ها، پورت‌ها میزبان‌های متفاوتی داشته باشند، منبع متفاوتی نیز خواهند داشت. یعنی هر کدام از آنها امکان دارد در سروری مخصوص به خود میزبانی شوند.

برای اینکه بتوانیم این ارور رو رفع کنیم قطعه کدی که در پایین قرار دادیم رو در فایل .htaccess وردپرس باید قرار بدید، در ادامه به صورت تصویری این مراحل رو توضیح میدهیم، قبل از اون باید بدانید کاربرد این فایل در وردپرس چیست.

کاربرد فایل .htaccess در وردپرس

فایل .htaccess یک فایل تنظیمات است که در وب‌سرورها برای تنظیمات مربوط به رفتار وبسایت‌ها استفاده می‌شود. این فایل قادر به تغییر تنظیمات مربوط به امنیت، مسیریابی، تغییر دامنه، کش‌کردن و… است. در وردپرس و سایر سیستم‌های مدیریت محتوا، استفاده از فایل .htaccess به شما امکان می‌دهد تا تنظیمات مربوط به دسترسی‌ها، امنیت و موارد مشابه را انجام دهید.

کد رفع مشکل در htaccess

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

مراحل قرار دادن کد بالا در وردپرس

وارد کنترل پنل خود شوید، اطلاعات ورود خود را از هاستینگ خود باید دریافت کنید. برای این منظور هنگام خرید دسترسی ها برای شما ایمیل میشود و همچنین از پنل کاربری سایت ارایه دهنده هاستیگ خود هم میتوانید وارد کنترل پنل شوید.

access control allow origin header error 1

وارد مدیریت فایل ها (فایل منیجر شوید)، دقت بفرمایید روش کار در دو کنترل پنل دایرکت ادمین و سی پنل یکی است. و در اینجا برای انجام این کار تفاوتی نمی کند.

access control allow origin header error 2

سپس فایل htaccess رو ادیت کنید (حتما قبل از انجام این کار یک بکاپ از این فایل تهیه و دانلود کنید) و قطعه کد بالا رو بعد از # END WordPress قرار دهید و فایل رو سیو کنید. توجه کنید برای رفع این مشکل راه حل های متفاوتی در اینترنت ارایه شده است. اما این روش بهترین مدل رفع این خطا می باشد تا برای همه کاربران سایت شما به طور ساده اعمال گردد.

access control allow origin header error 3

ممنونم از اینکه همراه ما بودید❤️

Picture of رضا رستگار
رضا رستگار
طراح سایت و توسعه دهنده وب

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

با وبسایت به توسعه کسب و کارتان در مشهد پلی بزنید: طراحی سایت حرفه‌ای در اختیار شماست!