Кросс-оригинальный запрос не устанавливает 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'