Почему я не могу получить cookie

@samiroutka · Регистрация: 26.03.2023

Студворк — интернет-сервис помощи студентам

Здравствуйте. У меня такая проблема: у меня не получается получить cookie из fetch используя getSetCookie (выдает пустой массив []). Я думал, что всё должно быть тривиально, но потратив около 2х часов на решения проблемы, я так и не понял в чём заключается ошибка. Помогите пожалуйста

JavaScript
1
2
3
4
5
6
7
8
9
10
let checkAccount = async (form) => {
    let formData = new FormData()
    formData.append('name', field1.current.value)
    formData.append('password', field2.current.value)
    let response = await fetch(`${apiUrl}login/`, {
      method: 'POST',
      body: formData,
      credentials: 'include',
    })
    console.log(response.headers.getSetCookie())

@Next999 · 25.10.2023, 22:24

почему за два часа не посмотрели описание метода?
а ведь в доке всё есть
https://developer.mozilla.org/... tSetCookie

@samiroutka · 25.10.2023, 22:25 **[ТС]**

Я посмотрел, но мне это не помогло

@Eva Rosalene · 25.10.2023, 23:53

samiroutka,

This method is intended for use on server environments (for example Node.js). Browsers block frontend JavaScript code from accessing the Set-Cookie header, as required by the Fetch spec, which defines Set-Cookie as a forbidden response-header name that must be filtered out from any response exposed to frontend code.

Этот метод предназначен для использования в серверных средах (например, Node.js). Браузеры блокируют доступ JavaScript-кода к заголовку Set-Cookie, как того требует спецификация Fetch, которая определяет Set-Cookie как запрещенное имя заголовка ответа, которое должно быть отфильтровано из любого ответа, предоставляемого коду фронтэнда.

Источник: Headers: getSetCookie() method

Так понятнее?

@samiroutka · 26.10.2023, 07:39 **[ТС]**

И как мне тогда получить cookie, если браузер блокирует их? И не понимаю почему тогда когда я использовал этот метод в next js у меня все работало, а сейчас я пишу на чистом react, и что-то не так. Вроде и там и там используется node js, разве нет?

@samiroutka · 26.10.2023, 15:31 **[ТС]**

Помогите пожалуйста

@Splaisto · 26.10.2023, 15:38

Сообщение от samiroutka

Помогите пожалуйста

помогаю - научись читать.

Сообщение от Eva Rosalene

метод предназначен для использования в серверных средах

Next. js — это фреймворк на основе React, который создает приложения с рендерингом на стороне сервера.

@samiroutka · 26.10.2023, 16:11 **[ТС]**

а когда я прописываю "npm start", npm это разве не node js?

Добавлено через 28 минут
Или react не работает на стороне сервера?

@Splaisto · 26.10.2023, 16:12

Не по теме:

это начинает становиться похожим на троллинг...

@samiroutka · 26.10.2023, 16:12 **[ТС]**

Я правда не понимаю(

@Splaisto · 27.10.2023, 08:12

Сообщение от samiroutka

Я правда не понимаю(

программирование - 10% логики, 10% писанины и 80% чтения.
стоит прочитать, что такое npm, node, react, next. возможно что-то более базовое (клиент, сервер, браузер).
даже не углубляясь, просто узнать определения вышенаписанного вполне хватит, что б понять ответ на свой вопрос.

если читать не хочется - стоит заняться чем-то другим.

@samiroutka · 27.10.2023, 09:36 **[ТС]**

npm — менеджер пакетов, для Node.js. react - это библиотека для разработки frontend. Node js - это платформа для JS. Next js - это react framework.

Добавлено через 2 минуты
Если я правильно понял, то "npm start" запускает локальный сервер на node, разве нет?

Добавлено через 31 минуту
Я кажись понял (подскажите правильно или нет): получается в next js у меня все работает потому, что он делает рендер по технологии ssr, а react по умолчанию делает рендер по технологии csr. Получается нужно перенести react на ssr, чтобы всё работало. Правильно?

@Eva Rosalene · 27.10.2023, 11:47

samiroutka, да, нужно, чтобы headers.getSetCookie() вызывался на сервере, тогда у него будет доступ к этим заголовкам.

Ваша проблема в том, что вы хотите явно делать это на фронте, вы берёте для формирования запроса данные из фронтовых же полей. Это на сервер 1 в 1 перенести не выйдет.

@samiroutka · 27.10.2023, 14:20 **[ТС]**

Не уже ли получить куки можно только на сервере?

@Usaga · 28.10.2023, 06:15

samiroutka, по ссылке об этом явно и прямо сказано. Читать умеешь?

@samiroutka · 28.10.2023, 08:17 **[ТС]**

Да точно, не заметил. А есть метод для получения куки на фронте?

@Usaga · 28.10.2023, 09:19

samiroutka, если кука с флагом httponly, то никакой метод не поможет.

И зачем тебе кука понадобилась на фронте? Что ты там такое мутишь?

@samiroutka · 28.10.2023, 13:51 **[ТС]**

Хорошо понял. Спасибо

Добавлено через 4 часа 5 минут
У меня просто SPA приложение. И я хочу чтобы оно работало с cookie. Получается из-за рендера на стороне клиента все SPA приложения не имеют доступа к cookie?

@mr_dramm · 28.10.2023, 14:29

Про работу с куками в браузере Куки, document.cookie

@samiroutka · 28.10.2023, 17:09 **[ТС]**

Я это читал. Там тоже как я понял сказано, что куки нельзя получить из js, но как тогда работают все spa приложения без куки? Наверное есть же какой-то способ

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Next999 35 / 27 / 10 Регистрация: 18.10.2020 Сообщений: 76
	25.10.2023, 22:24
	почему за два часа не посмотрели описание метода? а ведь в доке всё есть https://developer.mozilla.org/... tSetCookie 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	25.10.2023, 22:25 [ТС]
	Я посмотрел, но мне это не помогло 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	26.10.2023, 07:39 [ТС]
	И как мне тогда получить cookie, если браузер блокирует их? И не понимаю почему тогда когда я использовал этот метод в next js у меня все работало, а сейчас я пишу на чистом react, и что-то не так. Вроде и там и там используется node js, разве нет? 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	26.10.2023, 15:31 [ТС]
	Помогите пожалуйста 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	26.10.2023, 16:11 [ТС]
	а когда я прописываю "npm start", npm это разве не node js? Добавлено через 28 минут Или react не работает на стороне сервера? 0

@Splaisto
	26.10.2023, 16:12
	Не по теме: это начинает становиться похожим на троллинг... 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	26.10.2023, 16:12 [ТС]
	Я правда не понимаю( 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	27.10.2023, 09:36 [ТС]
	npm — менеджер пакетов, для Node.js. react - это библиотека для разработки frontend. Node js - это платформа для JS. Next js - это react framework. Добавлено через 2 минуты Если я правильно понял, то "npm start" запускает локальный сервер на node, разве нет? Добавлено через 31 минуту Я кажись понял (подскажите правильно или нет): получается в next js у меня все работает потому, что он делает рендер по технологии ssr, а react по умолчанию делает рендер по технологии csr. Получается нужно перенести react на ssr, чтобы всё работало. Правильно? 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	27.10.2023, 11:47
	samiroutka, да, нужно, чтобы `headers.getSetCookie()` вызывался на сервере, тогда у него будет доступ к этим заголовкам. Ваша проблема в том, что вы хотите явно делать это на фронте, вы берёте для формирования запроса данные из фронтовых же полей. Это на сервер 1 в 1 перенести не выйдет. 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	27.10.2023, 14:20 [ТС]
	Не уже ли получить куки можно только на сервере? 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	28.10.2023, 14:29
	Про работу с куками в браузере Куки, document.cookie 0

@Usaga 14314 / 9400 / 1355 Регистрация: 21.01.2016 Сообщений: 35,450
	28.10.2023, 06:15
	samiroutka, по ссылке об этом явно и прямо сказано. Читать умеешь? 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	28.10.2023, 08:17 [ТС]
	Да точно, не заметил. А есть метод для получения куки на фронте? 0

@Usaga 14314 / 9400 / 1355 Регистрация: 21.01.2016 Сообщений: 35,450
	28.10.2023, 09:19
	samiroutka, если кука с флагом httponly, то никакой метод не поможет. И зачем тебе кука понадобилась на фронте? Что ты там такое мутишь? 1

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	28.10.2023, 13:51 [ТС]
	Хорошо понял. Спасибо Добавлено через 4 часа 5 минут У меня просто SPA приложение. И я хочу чтобы оно работало с cookie. Получается из-за рендера на стороне клиента все SPA приложения не имеют доступа к cookie? 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	28.10.2023, 17:09 [ТС]
	Я это читал. Там тоже как я понял сказано, что куки нельзя получить из js, но как тогда работают все spa приложения без куки? Наверное есть же какой-то способ 0