Cookies не отправляются с помощью Axios

У меня есть форма, построенная на Nuxt/vuejs. На стороне бэкенда на django включена CSRF защита, которая теперь ожидает две вещи в вызове Api X-CSRFToken как заголовок и csrftoken как Cookie, я протестировал Api, вызвав Api через Postman, который работает нормально, но в случае Vue он не отправляет Cookies с post запросом позвольте мне показать вам мой код

Запрос на пост в Axios

const headers = {
    "X-CSRFToken": "some token",
    "Cookie": "csrftoken=some token",
}
await axios.post(`onboarding/first-name-last-name-email/`, {
    "first_name": "uneeb2",
    "last_name": "sad",
    "email": "asdsa@asd.colm"
}, {
    headers: headers
}, {
    withCredentials: true
})

Я также попробовал Fetch у него та же проблема

fetch(
  'https://staging.goqube.io/api/onboarding/first-name-last-name-email/',
  { credentials: 'include' ,method: "POST",headers:headers} // could also try ''
).then(res => {
  if (res.ok) return res.json()
  // not hit since no 401
})

Важно упомянуть, что CORS включен сервером, поэтому я не делаю ничего конкретного для этого.

Я также попробовал установить cookie как родной по

document.cookie = "csrftoken=some token; Path=/; Expires=Mon, 16 Feb 2023 08:02:50 GMT;";

через это я вижу, что Cookie устанавливается в браузере, но это все еще не отправляет Cookie с пост-запросом

Как вы видите, я также попробовал withCredentials: true, что было одним из распространенных предложенных решений, но в моем случае это не сработало.

Что касается конфигурации сервера, сервер Django является отдельным удаленным сервером, то же самое относится и к Nuxt App.

Я борюсь с этим уже довольно долго, может ли кто-нибудь указать мне, в чем может быть проблема?

У меня была такая же проблема, вот как я ее решил

Для того, чтобы axios отправил cookies withCredentials должно быть true, и пока withCredentials будет true, бэкенд должен отправить заголовок Access-Control-Allow-Credentials, иначе вы получите ошибку cors missing allow credentials и куки не будут установлены в браузере ( проблема сейчас в том, что axios не может отправить куки, поскольку они даже не были установлены в браузере для начала).

Вы сказали, что у вас включена функция CORS, поэтому я предполагаю, что у вас есть corsheaders в INSTALLED_APPS и вы добавили url вашего vue front end в список CORS_ALLOWED_ORIGINS в settings.py. Вы также должны добавить CORS_ALLOW_CREDENTIALS = True в settings.py.

Теперь в вашем приложении vue задайте имена cookie и заголовков csrf, как показано ниже, таким образом вам не нужно будет вручную получать значение cookie и устанавливать его в заголовок X-CSRFToken, axios сделает это сам.

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFToken"

затем установите withCredentials на true во время выполнения запроса или вы можете установить его по умолчанию, как показано ниже

axios.defaults.withCredentials = true;

Вы можете обратиться к этой записи в блоге

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