Как достать куки из ответа на запрос?
Пытаюсь решить проблему которую сам себе и создал в целях обучения.
Я хочу аутентифицироваться(залогиниться) с фронта отправив POST запрос в body {login, password}. В ответ я получаю в Cookie какое-то value (в примере ниже это userId), на фронте хочу взять из Cookie это значение сохранить его в localStorage, чтобы бы при обновлении страницы оставаться залогиненным - если есть кука в localStorage отправлять запрос на сервер проверяя не устарела ли она и отправлять последующие запросы в ручную добавляя в header эту куку
Но я никак не могу Cookie вручную, хотя в devTools они видны и даже в ответе сервера в headers есть Set-Cookie (через document.cookie, тоже не получается). Что я делаю не так или возможно логика с сохранением в localStorage неправильная?
Функция для запросов
export async function fetchAPI(url = '', data, method = 'POST') {
const options = {
method: method,
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
}
if(data) {
options['body'] = JSON.stringify(data)
}
const response = await fetch(url, options);
return response;
}
Запрос на аутентификацию
async (data) => {
try {
const response = await fetch('http://localhost:3000/login', data, 'POST');
console.log(response.headers.getSetCookie()); // выводит []
console.log(response.headers.get('Set-Cookie')); // выводит null
if(!response) {
throw new Error()
}
} catch (e) {
console.error(e);
}
Server.js
import express from 'express';
import cookieParser from 'cookie-parser';
import cors from 'cors';
const app = express();
app.use(cookieParser());
// Подключаем middleware для CORS
app.use(cors({
origin: 'http://localhost:5173', // Указываем домен вашего фронтенда
credentials: true // Разрешаем передачу куки
}));
// Обработчик POST запроса для аутентификации и установки Cookie
app.post('/login', (req, res) => {
// В реальном приложении здесь будет происходить аутентификация пользователя
// Устанавливаем Cookie
res.cookie('userId', '123456789', { maxAge: 900000, httpOnly: true });
// Отправляем ответ
res.send('Login successful. Cookie set.');
});
// Пример защищенного ресурса, который требует наличие Cookie
app.get('/protected/resource', (req, res) => {
// Проверяем наличие Cookie
const userId = req.cookies.userId;
if (userId) {
res.json({ message: 'Protected resource accessed successfully.' });
} else {
// Если Cookie отсутствует, возвращаем ошибку
res.status(401).json({ error: 'Unauthorized. User not logged in.' });
}
});
// Запуск сервера на порту 3000
app.listen(3000, () => {
console.log('Fake API server running on port 3000');
});
Ответы (1 шт):
Никак не достать.
Спецификация явно запрещает любой доступ к заголовкам Set-Cookie
из JS.
Вы можете получить значение куки из document.cookie
при условии что кука поставилась на домен текущей страницы и не имела флаг httpOnly
.