Привет мир!

Сегодня я делюсь своим последним опытом работы с Django и ReactJS (вчерашний опыт) и рассказываю о том, как мне удалось использовать эти два отдельных фреймворка для общения друг с другом и обмена информацией. Вы, должно быть, думаете: «Что в этом такого особенного? Почему эти ребята хвастаются?» Что ж, позвольте мне рассказать вам, в чем дело и как сильно я боролся.

Позвольте задать вам вопрос №1) Знаете ли вы фреймворк Django? Если вы знаете, чем следующая информация будет иметь смысл для вас. Django — один из лучших веб-фреймворков для серверной части и один из лучших фреймворков для языка Python для веб-сайтов. У него так много функций, включая поддержку баз данных, ORM, безопасность, механизм шаблонов и т. д. И django — мой самый любимый фреймворк для работы. Одна из вещей, с которой вам приходится иметь дело с django, — это токен CSRF в почтовых запросах. Если вы используете механизм шаблонов django и обслуживаете html-формы, вы можете просто использовать скрытый тег ввода с токеном csrf, и django позаботится об этом, и он настроит файлы cookie для вас, поэтому браузер также позаботится об этом при каждом почтовом запросе. Но когда вы пытаетесь отправить форму с помощью почтового метода, вы можете столкнуться с запрещенным ответом http 403, если ваша библиотека javascript не справляется с этим должным образом. Но опять же, если вы используете django для интерфейса и сервера, это не так сложно.

Позвольте мне задать вам вопрос № 2) Вы знаете ReactJs? Это все интерфейсная библиотека и одна из самых популярных и замечательных библиотек, которая экономит время разработчика и помогает создавать потрясающие интерфейсные приложения.

React позволяет безболезненно создавать интерактивные пользовательские интерфейсы.

И это правда, если только javascript не причиняет вам боль! Вернемся к моей первоначальной истории. Здесь я пытался сделать две вещи. Используйте django и реагируйте отдельно, один как чисто бэкэнд, работающий на сервере «X», работающий с базой данных, а второй как внешний интерфейс, обслуживающий сервер «Y». Но как? Теперь я не могу использовать django

<form method="post">{% csrf_token %}

потому что внешние реакции находятся на другом сервере, чем бэкэнд django. Поэтому, если я хочу отправить форму с помощью почтового запроса, я столкнусь с ошибкой http 403 запрещен. Что я могу сделать? Я погуглил «токен csrf reactjs django» и угадайте, что! Я финансирую около 33 800 результатов за (0,48 секунды), и по первым 10 результатам я не смог найти свой вариант использования. Может я неправильно искал? Может быть, поэтому я больше погуглил, и знаете что? Интернет настолько удивителен, что я все еще не мог найти свое решение. Может быть, я не умею гуглить! Наверное! Так что все, что я могу сделать, это потренировать свою хорошую мышцу под названием «мозг» и найти способ справиться с этим сценарием. Обслуживание интерфейса reactjs на «www.project.com» и использование бэкэнда django на «api.project.com», два отдельных веб-сервера, занимающихся своими делами! Как и большинство вещей, работает в 2018 году. Итак, мое решение для среды разработки:

1. Настройте проект django под названием «apiproject» и запустите его на порту 9000 (localhost:9000).

2. Создайте проект reactjs для внешнего интерфейса и запустите его на порту 3000 по умолчанию (localhost:3000)

3. Создайте конечную точку на бэкэнде «/validate», которая принимает запрос на получение и возвращает токен csrf в виде объекта json {«csrf_token»: «123abc»}, и эта конечная точка будет первой точкой, которую мое приложение reactjs отправит, как только оно будет загружено.

4. Также теперь я могу использовать ту же конечную точку и все будущие конечные точки для мобильного приложения.

5. Как только я получаю токен csrf в формате json, я сохраняю его в своем состоянии реакции и валлаа….

6. Подождите, я еще не закончил! 😅

7. В следующий раз, когда я создаю любую форму с помощью reactjs, я добавляю скрытый ввод с именем «csrfmiddlewaretoken» со значением этого токена csrf, который я сохранил. Итак, теперь моя форма готова справиться с этим, потому что, когда я отправлю свою форму, в ней будут данные, которые ищет django, верно?

8. Нет, мы забыли еще о двух вещах. CORS и Cookie.

Чтобы справиться с CORS, я использовал промежуточное ПО django под названием «django-cors-headers» и добавил такие настройки, как разрешить с локального хоста: 3000 и другие настройки. Для reactjs я добавил пакет npm под названием «react-cookie», который позволяет получать или устанавливать cookie.

9. Вернемся к деталям. Я добавил некоторые незначительные настройки в код django и reactjs, но теперь, используя axios для reactjs, я устанавливаю файл cookie «csrftoken» с тем же токеном csrf и могу отправлять почтовые запросы на мой внутренний API-сервер django.

Ура!!!

О, подождите, вы, должно быть, думаете, где пример кода, глупый! Что ж, я думаю, что этот пост достаточно длинный, и я не хочу делать его огромным, поэтому не добавляю сюда код. Но я создам еще один пост, в котором я поделюсь всеми примерами кода, и добавлю эту ссылку сюда. Также я планирую создать видео-учебник по этому вопросу для визуалов, таких как я. Вы можете подписаться на меня в instagram на «_desiprogrammer_» или на facebook на «vj.desiprogrammer», чтобы быть в курсе последних новостей со мной. Я буду делиться дополнительными примерами кода на YouTube и Medium, а также в Instagram и Facebook — это самый простой способ оставаться на связи со мной.

Также не стесняйтесь комментировать этот пост и дайте мне знать ваши предложения, проблемы. Увидимся в следующем посте.

Спасибо 🤓