خطای Access-Control-Allow-Origin متوقف‌ کنندهٔ امنیتی مرورگرها برای جلوگیری از دسترسی غیرمجاز وب‌سایت‌ها به منابع یکدیگر است.

این خطا زمانی رخ می‌دهد که مرورگر شما بخواهد از یک دامنه، پروتکل یا پورت متفاوت به سروری دیگر درخواست (HTTP Request) ارسال کند.

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

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

برای مثال، اگر Frontend روی:

https://example.com

و API روی:

https://api.example.com

قرار داشته باشد، مرورگر بررسی می‌کند که آیا API اجازه دریافت درخواست از https://example.com را دارد یا خیر. در صورت عدم اجازه، خطایی مانند زیر نمایش داده می‌شود:

Access to fetch ... has been blocked by CORS policy

تنظیم CORS در Django

برای تنظیم CORS در Django می‌توانید از پکیج django-cors-headers استفاده کنید.

ابتدا پکیج را نصب کنید:

pip install django-cors-headers

سپس در فایل settings.py، پکیج corsheaders را به INSTALLED_APPS اضافه کنید:

INSTALLED_APPS = [
    ...
    'corsheaders',
]

در بخش MIDDLEWARE نیز، Middleware مربوط به CORS را اضافه کنید. بهتر است این Middleware قبل از CommonMiddleware قرار بگیرد:

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

سپس دامنه‌ای که اجازه ارسال درخواست به API را دارد مشخص کنید:

CORS_ALLOWED_ORIGINS = [
    'https://example.com',
]

در این مثال https://example.come را با آدرس Frontend خود جایگزین کنید.

 

اجازه دسترسی از تمام دامنه‌ ها

اگر می‌خواهید API از تمام Originها قابل دسترسی باشد، می‌توانید از تنظیم زیر استفاده کنید:

CORS_ALLOW_ALL_ORIGINS = True

توجه:

در محیط Production بهتر است به جای فعال کردن دسترسی برای تمام دامنه‌ها، فقط Origin های موردنیاز را در CORS_ALLOWED_ORIGINS مشخص کنید.

پس از اعمال تغییرات، سرویس Django را مجدد Deploy کنید تا تنظیمات جدید اعمال شوند.

 

نکته: اگر Frontend و API روی دو دامنه، پورت یا پروتکل متفاوت قرار داشته باشند، ممکن است به تنظیم CORS نیاز داشته باشند. تنظیم CORS باید در سمت سروری انجام شود که درخواست به آن ارسال می‌شود.