Как обратиться к cookie csrf токена из javascript?

Question

[ynchk1]

Проблема следующая:
При попытке обратиться к серверу, для получения csrf токена, последний устанавливается в cookie. Однако, обратиться к нему из js нельзя. (параметр httponly=False)

Запрос:

export const getCsrf = createAsyncThunk('user/get-csrf', async () => {
    const response = await axios.get(`${host}/api_users/csrf/`, 
            { withCredentials: true }
        );

    return response.data
})

Ендпоинт:

@api_view(http_method_names=['GET'])
def csrf(request): 
    response = Response({'status': 'ok'})
    response.set_cookie(
        'csrftoken',
        get_token(request),
        samesite='None',
        httponly=False,
        secure=True
    )
    return JsonResponse({'csrftoken': get_token(request)})

Я подозреваю что проблема может крыться в параметре samesite='None', но при попытке заменить на значение 'Lax' выходит следующая ошибка:

This attempt to set a cookie via a Set-Cookie header was blocked because it had the "SameSite-Lax" attribute but came
from a cross-site response which was not the response to a top-level navigation.

Comments

[Алексей Уколов]

А зачем вам пытаться получить его из куки, если он ещё и в теле запроса нормально отдаётся?

[Lynn «Кофеман»]

Если текущий домен и домен из переменной host не совпадают, то из JS никак нельзя получить куки.

[ynchk1]

Алексей Уколов, я уточню, а для последующих post запросов необходимо хранить токен в localstogage или отправлять предварительный get запрос на получение csrf токена перед основным post запросом?

Answer 1

[askurashev]

$(function () {
	$.ajaxSetup({
		headers: { "X-CSRFToken": getCookie("csrftoken") }
	});
});

и далее используешь:
headers: {'X-CSRFToken': csrfToken,},