CORSMissingAllowCredentials خطا در HTTP و چگونگی رفع آن

معرفی مشکل CORSMissingAllowCredentials

خطای CORSMissingAllowCredentials یکی از خطاهای رایجی است که در هنگام استفاده از ریسورس‌های با مبدا مختلف (Cross-Origin) در وب مشاهده می‌شود. این خطا عمدتاً زمانی رخ می‌دهد که مرورگر نتواند به صحیحی تایید کند که درخواست ارسال شده از طرف یک منبع معتبر و مجاز برای دسترسی به منابع محدود شده است. این خطا بیشتر در مواجهه با API ها و درخواست‌های XMLHttpRequest یا Fetch API دیده می‌شود.

چرا CORSMissingAllowCredentials رخ می‌دهد؟

یکی از دلایل اصلی بروز این خطا، عدم تنظیم صحیح هدر Access-Control-Allow-Credentials در سمت سرور است. این هدر به مرورگر اعلام می‌کند که آیا درخواست‌ها با اعتبارات جاری کاربر مثل کوکی‌ها، توکن‌ها یا داده‌های احراز هویت ارسال شوند یا خیر. اگر این هدر ارسال نشود و در عین حال درخواست شما شامل اطلاعات اعتباری باشد، مرورگر برای محافظت از امنیت کاربر، درخواست را مسدود می‌کند.

چگونه خطا را رفع کنیم؟

راه حل این مشکل ساده است؛ باید در تنظیمات سرور، هدر Access-Control-Allow-Credentials را به درستی تنظیم نمایید. این کار معمولاً در تنظیمات HTTP سرور یا در اپلیکیشن سمت سرور انجام می‌شود. اگر در حال توسعه یک API هستید، مهم است که بدانید از کدام چهارچوب استفاده می‌کنید، زیرا هر چهارچوب (مانند Express.js، Flask و غیره) روش خاص خود را برای تنظیم این هدر دارد.

آیا تنظیم Allow-Credentials ریسک امنیتی دارد؟

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

<script>
fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include'
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('There was a problem with the fetch operation:', error));
</script>

<script>: این تگ شروع یک بلوک اسکریپت جاوا اسکریپت می‌باشد.
fetch: این تابع برای ارسال درخواست‌های HTTP به کار می‌رود.
'https://api.example.com/data': آدرس URL که می‌خواهیم اطلاعات را از آن دریافت کنیم.
method: 'GET': نوع درخواست HTTP که در اینجا یک درخواست GET می‌باشد.
credentials: 'include': اجازه می‌دهد اطلاعات اعتباری مانند کوکی‌ها در درخواست شامل شوند.
response => response.json(): پاسخی که به فرمت JSON تبدیل می‌شود.
.then(data => console.log(data)): داده‌های دریافتی در کنسول چاپ می‌شوند.
.catch: خطای ناشی از درخواست را دریافت می‌کند و چاپ می‌کند.