Как отправить файл cookie с сервера в браузер пользователя
Я пытаюсь понять файлы cookie и их работу
Итак, я пытаюсь отправить файл cookie с сервера и установить его в браузере пользователя.
Но внутри developer tools--> application-->cookie я не вижу там своего печенья и не понимаю, почему
Это простое приложение для реагирования Это мой App.js
function App() {
async function Check() {
const response = await fetch("http://localhost:5000/check", {
method: "GET",
});
const data = await response.text();
console.info(data);
}
return (
<div className = "App">
<button onClick = {Check}>CheckCookie</button>
</div>
);
}
export default App;
Это мой сервер
const express = require('express');
const cors = require('cors');
const app = express();
app.use(express.json());
app.use(express.urlencoded({extended:false}));
app.use(cors());
app.get('/', (req,res)=>{
res.send("Website Server");
})
app.get('/check', cors(), async (req, res) => {
res.cookie('cookieName', 'SUCCESSFULL', {
maxAge: 900000,
httpOnly: false,
secure: false,
sameSite: 'Strict',
domain: 'localhost'
});
res.send('Cookie set successfully');
});
app.listen(5000, () => console.info('Running on port 5000'));
При нажатии кнопки «Проверить cookie» в консоли регистрируется сообщение «Cookie установлено успешно», но когда я проверяю developer tools--> application-->cookie, я не вижу там своего файла cookie.
Вместо этого, когда я открываю вкладку сетей, я вижу файл cookie, отправленный в ответ.
Почему это происходит, я не могу понять, как это работает, пожалуйста, помогите.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно изменить обе стороны (server.js и App.js)
Обработка файлов cookie
response-cookie упрощает обработку файлов cookie для max-age обработки.
Нет необходимости анализировать заголовки ответов с сервера, чтобы извлечь время истечения срока действия, и вы можете полностью контролировать управление файлами cookie на стороне клиента, что позволяет легко настраивать время истечения срока действия по мере необходимости без зависимостей на стороне сервера.
Срок действия подтверждения истекает в пользовательском интерфейсе клиента.
При нажатии кнопки «Установить cookie» мы рассчитываем срок действия (expires) на основе текущего времени (Date.now()) плюс желаемой продолжительности (900 * 1000 миллисекунд).
Сервер предоставляет CORS
corsOptions определяет параметры CORS, которые будут использоваться промежуточным программным обеспечением CORS.
настраивает промежуточное программное обеспечение CORS с указанными параметрами.
Теперь сервер будет разрешать запросы от http://localhost:3000 (источник вашего приложения React) и включит учетные данные (файлы cookie) для этих запросов.
const corsOptions = {
origin: 'http://localhost:3000', // your React URL
credentials: true // Enable credentials (cookies, HTTP authentication)
};
app.use(cors(corsOptions));
Экспресс-сервер
Как server.js
const express = require('express');
const cors = require('cors');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
// Allow requests only from your React app's origin
const corsOptions = {
origin: 'http://localhost:3000',
credentials: true // Enable credentials (cookies, HTTP authentication)
};
app.use(cors(corsOptions));
app.get('/', (req, res) => {
res.send('Website Server');
});
app.get('/check', async (req, res) => {
res.cookie('cookieName', 'SUCCESSFULL', {
maxAge: 900000,
httpOnly: false,
secure: false,
sameSite: 'Strict',
domain: 'localhost'
});
res.send('Cookie set successfully');
});
app.listen(5000, () => console.info('Running on port 5000'));
Сторона клиента
App.js
import React, { useState } from 'react';
import { useCookies } from 'react-cookie';
function App() {
const [cookies, setCookie] = useCookies(['cookieName']);
const [cookieStatus, setCookieStatus] = useState('');
const [expiresAt, setExpiresAt] = useState('');
const handleCheckCookie = async () => {
try {
const response = await fetch('http://localhost:5000/check', {
method: 'GET',
credentials: 'include' // Include cookies in the request
});
if (response.ok) {
const expiresInMs = response.headers.get('max-age') * 1000;
const now = new Date();
const expires = new Date(now.getTime() + expiresInMs);
document.cookie = `cookieName=SUCCESSFULL;expires=${expires.toUTCString()};path=/;`;
setCookieStatus('Cookie set successfully');
setExpiresAt(expires.toLocaleString());
} else {
setCookieStatus('Failed to set cookie');
setExpiresAt('');
}
} catch (error) {
console.error('Error:', error.message);
setCookieStatus('Failed to set cookie');
setExpiresAt('');
}
};
return (
<div>
<button onClick = {handleCheckCookie}>Check Cookie</button>
<p>{cookieStatus}</p>
{expiresAt && <p>Cookie Expires At: {expiresAt}</p>}
</div>
);
}
export default App;
Вам необходимо указать опцию
credentialsв запросе на получение, Developer.mozilla.org/en-US/docs/Web/API/fetch#credentials