رفع خطای "No 'Access-Control-Allow-Origin' header is present on the requested resource" در جاوا اسکریپت

چرا این خطا اتفاق می‌افتد؟

یکی از رایج‌ترین خطاهایی که در هنگام ارسال درخواست‌های Cross-Origin در جاوا اسکریپت با آن مواجه می‌شویم، خطای "No 'Access-Control-Allow-Origin' header is present on the requested resource" است. این خطا زمانی رخ می‌دهد که یک درخواست از دامنه‌ای به دامنه‌ای دیگر ارسال می‌شود (مثلاً درخواست به یک API که در دامنه‌ای دیگر میزبانی شده است) و مرورگر از آن درخواست جلوگیری می‌کند زیرا سرور پاسخ مناسبی را با هدر Access-Control-Allow-Origin ارسال نکرده است.

برای درک بهتر این موضوع، باید ابتدا مفهوم CORS (Cross-Origin Resource Sharing) را بررسی کنیم.

چرا خطای CORS رخ می‌دهد و چگونه آن را برطرف کنیم؟

CORS یک مکانیزم امنیتی در مرورگرهاست که به سرور این امکان را می‌دهد تا مشخص کند که آیا منابع آن از دامنه‌های دیگر قابل دسترسی است یا خیر. به عبارت دیگر، زمانی که شما یک درخواست HTTP به یک سرور ارسال می‌کنید که در دامنه‌ای متفاوت از دامنه اصلی صفحه وب شما قرار دارد، مرورگر با استفاده از CORS بررسی می‌کند که آیا سرور این درخواست را مجاز می‌داند یا نه.

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

چرا این خطا در جاوا اسکریپت رخ می‌دهد؟

در جاوا اسکریپت، وقتی شما از ابزارهایی مانند fetch یا XMLHttpRequest برای ارسال درخواست‌ها استفاده می‌کنید، مرورگر به‌طور پیش‌فرض بررسی می‌کند که آیا درخواست به منابع خارجی ارسال می‌شود یا خیر. اگر درخواست به دامنه‌ای دیگر ارسال شود (Cross-Origin Request)، مرورگر هدر Access-Control-Allow-Origin را در پاسخ از سرور بررسی می‌کند.

در صورتی که این هدر وجود نداشته باشد، خطای "No 'Access-Control-Allow-Origin' header is present on the requested resource" نمایش داده می‌شود.

حل مشکل "No 'Access-Control-Allow-Origin' header" در جاوااسکریپت

برای رفع این مشکل، باید هدر Access-Control-Allow-Origin را در سرور پیکربندی کنید. این کار بستگی به نوع سرور و فریمورک‌هایی دارد که برای توسعه استفاده می‌کنید. در اینجا روش‌هایی برای رفع مشکل در محبوب‌ترین تکنولوژی‌ها آورده شده است. در ادامه فایل رفع خطای کامل برای فریم ورک های مختلف و ... قرار داده شده است. از دانلود باکس میتوانید فایل را دانلود فرمایید.

نتیجه‌گیری

خطای "No 'Access-Control-Allow-Origin' header is present on the requested resource" یکی از مشکلات رایج در ارسال درخواست‌های Cross-Origin است. این خطا معمولاً به دلیل عدم پیکربندی مناسب سرور برای پشتیبانی از CORS رخ می‌دهد. در این مقاله، روش‌های مختلف برای رفع این مشکل در فریمورک‌های مختلف مانند PHP، Node.js، Node-RED و Flask معرفی شد.