Кросс-оригинальный запрос не устанавливает cookies, reactJs, Django Backend, Firefox + Chrome

У меня есть приложение react, и я отправляю запросы следующим образом:

        const public_key_r = await axios.get(
      "https://eliptum.tech/get-public-key",
      {
        withCredentials: true, // This is crucial for cookies to be sent and received in cross-origin requests
      },
    );
    const publicKey = public_key_r.data.publicKey;
    const csrfToken = public_key_r.data.csrf_token;
    console.log(csrfToken);
    const encryptedPassword = await encryptData(password, publicKey, false);

    const response = await axios.post(
      "https://eliptum.tech/user/create",
      {
        username,
        encryptedPassword,
        email,
        phone_number: phoneNumber,
      },
      {
        withCredentials: true,
        headers: {
          "X-CSRFToken": csrfToken,
        },
      },
    );

Мое резервное представление для запроса https://eliptum.tech/get-public-key get таково:


class PublicKeyView(View):
    def get(self, request):
        # Ensure a session ID is available
        if not request.session.session_key:
            request.session.save()

        session_id = request.session.session_key

        private_key, public_key = RSAKeyManager.get_keys(session_id)
        if not private_key or not public_key:
            # Keys are generated as bytes, so decode them before storing
            private_key, public_key = RSAKeyManager.generate_keys()
            RSAKeyManager.store_keys(session_id, private_key.decode('utf-8'), public_key.decode('utf-8'))

        if isinstance(public_key, bytes):
            public_key = public_key.decode('utf-8')

        # Retrieve CSRF token
        csrf_token = get_token(request)

        # Construct the JSON response
        response_data = {
            "session_id": session_id,
            "public_key": public_key,
            "csrf_token": csrf_token
        }

        # Create JsonResponse with the response data
        response = JsonResponse(response_data, status=200)

        # Set CSRF token as a cookie in the response
        # Ensure the Secure and SameSite attributes are correctly set for cross-origin compatibility
        response.set_cookie('csrftoken', csrf_token, secure=True, samesite='None')
        response['Access-Control-Allow-Credentials'] = 'true'
        return response

Настройки:

Добавил все, что смог найти, чтобы заставить работать кросс ориджин, но нет: const response = await axios.post( "https://eliptum.tech/user/create"

В бэкенде есть django-cors-headers и response.set_cookie('csrftoken', csrf_token, secure=True, samesite='None') response['Access-Control-Allow-Credentials'] = 'true'

Все запросы имеют withCredentials: true для axios, не уверен, чего не хватает или что не настроено должным образом, если что

В принципе, у меня есть бэкэнд на хосте eliptum.tech, а фронтенд на какой-то песочнице, но нет никакого способа заставить их работать вместе, похоже

Не уверен, что вы можете получить доступ к https://7w37f9-3000.csb.app/#, это фронтенд, который вы могли бы проверить, что я говорю, нужно выбрать вход/подписку, а затем зарегистрироваться со случайной учетной записью

Проблема в том, что я не могу выполнить запрос на почту, потому что:

Reason given for failure:

    CSRF cookie not set.

Что справедливо, учитывая, что куки не установлены :(

)

Похоже, что помимо всего того, что я добавил до сих пор, в настройках django нужно добавить CSRF_COOKIE_SAMESITE = 'None'

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