我正在尝试解决我出于学习目的为自己创建的问题。
我想通过向 body {登录名，密码} 发送 POST 请求来从前端进行身份验证（登录）。作为响应，我在 Cookie 中收到一些值（在下面的示例中是 userId），在前面我想从 Cookie 中获取该值并将其保存在 localStorage 中，以便在刷新页面时我保持登录状态 - 如果localStorage中有一个cookie，向服务器发送请求时不检查它是否已过期，并通过将此cookie添加到标头来手动发送后续请求
但我无法手动设置 Cookie，尽管它们在 devTools 中可见，甚至在服务器响应的标头中也有一个 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);
}
服务器.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');
});
