Ошибка отсутствия CSRF-токена при использовании vue-recaptcha и промежуточного программного обеспечения Django Rest Framework

У меня следующая установка :

  • фронтенд приложение, разработанное на VueJS, на котором у меня есть компонент регистрационной формы, включающий несколько стандартных полей, обязательный флажок (пользовательское соглашение) и флажок Google Recaptcha V2 (vue-recaptcha)
    • .
  • бэкенд API, разработанный с помощью Django Rest Framework, с определенным маршрутом для запроса веб-сервиса Google Recaptcha (с помощью приложения rest_framework_recaptcha)

У меня нет никаких проблем при работе в среде разработки (фронтенд и бэкенд доступны на localhost). Однако при развертывании на производстве (с включенным https) я сталкиваюсь со следующей проблемой:

  • Сначала проверяем флажок пользовательского соглашения, потом Recaptcha работает нормально
  • При проверке Recaptcha после пользовательского соглашения возвращается ошибка 403 Forbidden с сообщением CSRF token missing or incorrect
  • После получения предыдущей ошибки, я всегда получаю ошибку при повторном заполнении формы, независимо от порядка установки флажков
    • .

Я не понимаю, почему:

  1. the problem does not occur on localhost
  2. the order of filling form lead to different behaviours
  3. the problem only occurs on my registration form while I do have several other forms (login, sending data, etc.) that work fine

Есть идеи, которые помогут мне понять/исследовать проблему? Я прочитал много постов, связанных с Django и CSRF или CORS проблемами, но они часто связаны с шаблонами django или SessionAuthentication.

Нелегко догадаться о проблеме, не видя кода.

Однако, поскольку localhost работает, возможно, базовый url в production в вашем фронтенде не https://, а http://.

Вернуться на верх