روش حل خطای "No 'Access-Control-Allow-Origin' header is present on the requested resource" در جاوااسکریپت
در حال حاضر به طور معمول زمانی که یک درخواست از طریق XMLHttpRequest، fetch یا دیگر ابزارهای جاوااسکریپت در مرورگر به سرور ارسال میشود، مرورگرها با سیاست امنیتی به نام "Same Origin Policy" این درخواستها را محدود میکنند. به عبارت دیگر، برای مثال اگر صفحهای از دامنه exmaple.com را باز کنید و بخواهید به یک منبع در دامنه anotherexample.com دسترسی پیدا کنید، مرورگر این درخواست را به دلیل عدم وجود هدر Access-Control-Allow-Origin
در پاسخ سرور مسدود میکند. این در حالی است که ابزارهایی مانند Postman هیچگونه محدودیت مشابهی ندارند و میتوانند به راحتی به منابع خارج از دامنه دسترسی پیدا کنند.
XMLHttpRequest cannot load http://example.com/.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
دلیل تفاوت در رفتار Postman و مرورگرها در این است که Postman به عنوان یک ابزار مستقل عمل میکند و به سیاستهای CORS (Cross-Origin Resource Sharing) وابسته نیست. این ابزار به طور مستقیم به سرورهای خارجی متصل میشود، در حالی که مرورگرها به منظور جلوگیری از حملات CSRF (Cross-Site Request Forgery) و سایر تهدیدات امنیتی، محدودیتهای بیشتری برای درخواستهای بین دامنهای دارند.
دیدن این خطا بدان معناست که API یا منبع خارجی که شما در حال درخواست به آن هستید، هدرهای مناسب CORS را برای درخواستهای شما برنگردانده است. در نتیجه، زمانی که شما درخواست خود را از طریق AJAX در جاوااسکریپت ارسال میکنید، مرورگر آن را مسدود میکند.
به این دلیل که مرورگر در برخی مواقع ابتدا یک درخواست OPTIONS (پیشپرسی) برای بررسی مجوزهای CORS ارسال میکند، ممکن است شما نتوانید به درستی متوجه شوید که آیا هدرها به درستی تنظیم شدهاند یا خیر. اگر سرور هدر Access-Control-Allow-Origin
را به درستی تنظیم نکرده باشد، مرورگر این درخواست را مسدود خواهد کرد.
در نهایت، برای رفع این مشکل باید هدرهای مناسب CORS را برای درخواستها از سمت سرور برگشت دهید یا با استفاده از برخی روش ها مانند JSONP و یا پروکسیها درصدد دور زدن این مکانیزم برآیید. البته این روش ها در زمان توسعه موثر هستند و روش پایدار تغییر تنظیمات سرور می باشد.