اگر تا به حال سعی کرده اید برنامه Frontend خود را به Backend Django خود وصل کنید و ناگهان خطایی را وارد کنید که چیزی شبیه به آن باشد “توسط سیاست CORS مسدود شده است”، شما تنها نیستید. این ناامید کننده است ، به خصوص وقتی کد شما خوب به نظر می رسد.

پس چه می گذرد روی؟

اینجاست کورس . pageبشر

برای محافظت از کاربران وجود دارد ، اما اگر به درستی پیکربندی نشده باشد ، می تواند برنامه شما را از کار شما به همان روشی که می خواهید متوقف کند.

بیایید آن را برطرف کنیم.

در این مقاله ، من شما را از طریق هر آنچه را که باید بدانید برای فعال کردن CORS در Django بدون سردرد پیاده می کنم.

این چیزی است که ما پوشش خواهیم داد:

  • CORS چیست و چرا باید اهمیت دهید؟

  • چگونه می توانم CORS را در Django فعال کنم؟

    • 1. نصب Django-Cors-Headers

    • 2. آن را به نصب شده اضافه کنید

    • 3. اضافه کردن واسطه

    • 4. منشأ مجاز را تنظیم کنید

  • تنظیمات اختیاری که ممکن است نیاز داشته باشید

    • اجازه دهید همه منشاء (برای تولید توصیه نمی شود)

    • اعتبار مجاز (کوکی ها ، auth)

    • به هدرهای خاص اجازه دهید

  • مثال: تنظیمات کامل قطعه پرونده

  • خطاهای رایج (و روش رفع آنها)

    • 1. cors اصلاً کار نمی کند؟

    • 2. درخواست Preflight Fails (روش گزینه ها)

    • 3. با استفاده از چارچوب استراحت Django؟

  • متداول

    • آیا می توانم چندین URL جلو اجازه دهم؟

    • آیا COR فقط بر توسعه محلی تأثیر می گذارد؟

    • آیا اجازه دادن به همه ریشه ها امن است؟

    • آیا باید هر چیزی را تغییر دهم روی جلو؟

  • منابع بیشتر

  • افکار نهایی

CORS چیست و چرا باید اهمیت دهید؟

قبل از شروع تنظیم تنظیمات ، درک این مسئله مهم است که CORS چیست.

تصور کنید که شما یک پیشانی ساخته شده با React Running ساخته اید روی http://localhost:3000 و یک API Django در حال اجرا است روی http://localhost:8000بشر

پیشنهاد می‌کنیم بخوانید:  جاوا اسکریپت: روش تغییر مسیر به یک صفحه وب دیگر اغلب اوقات، ما باید کاربران را به وب سایت یا وب دیگری هدایت کنیم page روی همین سایت راه های مختلفی برای تغییر مسیر وجود دارد که شامل تغییر مسیر جاوا اسکریپت، تغییر مسیر سمت سرور و تغییر مسیر متا رفرش HTML می شود. تغییر مسیر اساسا مکانیزمی برای ارسال کاربران به آدرس URL دیگری است. انگیزه استفاده از ...

هنگامی که جلوی سعی در صحبت با پس زمینه دارد ، مرورگر شما می بیند که آنها منشاء یکسان نیستند (آنها درگاه های مختلفی دارند) ، و این درخواست را مسدود می کند.

این Cors است که کار خود را انجام می دهد. فرض بر این است که شما ممکن است سعی کنید کاری ناامن انجام دهید – مانند سرقت کوکی ها یا داده های کاربر – بنابراین قدم می زند.

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

چگونه می توانم CORS را در Django فعال کنم؟

شما به یک بسته شخص ثالث به نام نیاز دارید django-cors-headersبشر این مورد به طور گسترده مورد استفاده قرار می گیرد و به طور فعال نگهداری می شود. در اینجا روش تنظیم آن آورده شده است:

1. نصب django-cors-headers

این را در خود اجرا کنید terminal:

pip install django-cors-headers

این بسته را به محیط شما اضافه می کند تا Django بتواند از آن استفاده کند.

2. آن را اضافه کنید INSTALLED_APPS

خود را باز کنید settings.py پرونده و پیدا کردن INSTALLED_APPS بخش این خط را اضافه کنید:

INSTALLED_APPS = [
    ...
    'corsheaders',
]

این برنامه را با Django ثبت می کند.

3. اضافه کردن واسطه

حالا به پایین بروید MIDDLEWARE بخش در settings.pyبشر این را اضافه کنید در بالای لیست:

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

چرا در بالا؟ از آنجا که Middleware در Django به ترتیب اجرا می شود. اگر آن را در بالا قرار ندهید ، ممکن است هدرهای CORS به درستی اضافه نشود و مرورگر شما همچنان درخواست های شما را مسدود می کند.

4. منشأ مجاز را تنظیم کنید

این جایی است که به جنگو می گویید که منشأ مجاز به صحبت با باطن شما است.

هنوز در settings.py، اضافه کنید:

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

تعویض کردن localhost:3000 با هر دامنه یا پورت جلوی شما از آن استفاده می کند. اگر از HTTPS یا استقرار استفاده می کنید ، حتما URL صحیح را درج کنید ، مانند https://yourfrontend.comبشر

و همین است! اکنون به جلوی خود اجازه می دهید تا به پس زمینه خود دسترسی پیدا کند.

تنظیمات اختیاری که ممکن است نیاز داشته باشید

وابسته روی پروژه شما ، شما ممکن است به موارد دیگری بپردازید. در اینجا برخی از تنظیمات اضافی که ممکن است مفید باشد وجود دارد:

اگر فقط در حال آزمایش هستید و می خواهید همه چیز را اجازه دهید (با این کار مراقب باشید) ، می توانید از آنها استفاده کنید:

CORS_ALLOW_ALL_ORIGINS = True

باز هم ، از این در تولید استفاده نکنید مگر اینکه خطرات را درک کنید. این می تواند API شما را برای سوءاستفاده باز کند.

پیشنهاد می‌کنیم بخوانید:  چگونه لینک زنجیره ای (LINK) بخریم؟

اعتبار مجاز (کوکی ها ، auth)

اگر جلوی شما اعتبار احراز هویت مانند کوکی ها یا نشانه ها را ارسال می کند ، شما نیز به این موضوع نیاز دارید:

CORS_ALLOW_CREDENTIALS = True

و مطمئن شوید که نه استفاده کردن CORS_ALLOW_ALL_ORIGINS با این تنظیم – به دلیل قوانین امنیتی کار نمی کند. به CORS_ALLOWED_ORIGINSبشر

به هدرهای خاص اجازه دهید

به طور پیش فرض ، هدرهای مشترک مجاز هستند ، اما اگر شما سفارشی ارسال می کنید (مانند X-Auth-Token) ، می توانید اضافه کنید:

CORS_ALLOW_HEADERS = [
    "content-type",
    "authorization",
    "x-auth-token",
    ...
]

مثال: تنظیمات کامل قطعه پرونده

در اینجا یک نسخه کوچک از آنچه شما settings.py ممکن است بعد از راه اندازی به نظر برسد:

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

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

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CORS_ALLOW_CREDENTIALS = True

شما می توانید این پایه را تغییر دهید روی نیازهای شما ، اما این ساختار اساسی است.

خطاهای رایج (و روش رفع آنها)

1. cors اصلاً کار نمی کند؟

بررسی دوبل:

  • شما اضافه کردید corsheaders.middleware.CorsMiddleware من در بالا از لیست میان افزار

  • منشأ جلوی شما دقیقاً مطابقت دارد ، از جمله پورت و پروتکل.

  • شما سرور خود را پس از تغییر تنظیمات مجدداً راه اندازی کردید.

2. درخواست Preflight Fails (روش گزینه ها)

بعضی اوقات مرورگر شما یک ارسال می کند OPTIONS ابتدا درخواست کنید تا بررسی کنید که آیا سرور به درخواست واقعی اجازه می دهد یا خیر. اطمینان حاصل کنید که نظرات یا راه اندازی Django شما اجازه می دهد این روش یا Django خطای 405 را برگرداند.

شما معمولاً نیازی به انجام کاری در اینجا ندارید ، مگر اینکه از یک میان افزار سفارشی یا دکوراتور مشاهده کنید که آن را مسدود می کند.

3. با استفاده از چارچوب استراحت Django؟

مشکلی نیست – django-cors-headers خارج از جعبه کار می کند. فقط مطمئن شوید که نصب شده است و وسط نرم افزار به درستی تنظیم شده است.

متداول

آیا می توانم چندین URL جلو اجازه دهم؟

بله فقط موارد بیشتری را به لیست اضافه کنید:

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "https://myfrontend.com",
]

آیا COR فقط بر توسعه محلی تأثیر می گذارد؟

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

آیا اجازه دادن به همه ریشه ها امن است؟

نه. فقط این کار را به طور موقت در طول توسعه انجام دهید. همیشه دسترسی در تولید را فقط به دامنه هایی که به آنها اعتماد دارید محدود کنید.

آیا باید هر چیزی را تغییر دهم روی جلو؟

گاهی اوقات. اگر در حال ارسال اعتبار (مانند کوکی ها) هستید ، باید تنظیم کنید credentials: "include" در درخواست های Fetch یا Axios خود.

مثال با Fetch:

fetch("http://localhost:8000/api/data", {
  method: "GET",
  credentials: "include",
})

افکار نهایی

COR ها می توانند مانند دیواری که هنگام ساخت برنامه های وب در آن کار می کنید احساس کنید. اما هنگامی که شما روش عملکرد آن را آویزان کردید – و چگونه آن را در Django تنظیم کنید – این به یک چیز کوچک تبدیل می شود که شما پیکربندی می کنید و حرکت می کنید onبشر

فقط به یاد داشته باشید:

  • در تولید خاص باشید

  • همیشه سرور را بعد از تغییر مجدداً راه اندازی کنید

  • هشدارها را در مرورگر خود نادیده نگیرید console – آنها دوستان شما هستند

اکنون می دانید که چگونه می توانید CORS را در Django به روش صحیح فعال کنید.

منابع بیشتر

  • django-cors-headers github page – برای مستندات کامل.

  • بررسی اجمالی MDN CORS – برای درک روش کار Cors در زیر کاپوت.

  • اسناد رسمی میان افزار Django