Файлы cookie не передаются через Vercel
Сайт работает отлично, когда серверная часть и внешний интерфейс развернуты локально (на двух разных портах), но файлы cookie не отправляются, когда я запускаю их на Vercel. Я даже попробовал запустить интерфейс локально, используя серверную часть, которую я развернул на Vercel, но запрос все еще не содержал файлов cookie.
Вот как выглядит запрос с использованием локального бэкэнда: введите сюда описание изображения
И с серверной частью, развернутой Vercel: введите сюда описание изображения
Мой файл vercel.json выглядит так:
{
"version": 2,
"builds": [
{
"src": "*.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/",
"methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
"headers": {
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Origin": "http://localhost:3000",
"Access-Control-Allow-Methods": "GET,OPTIONS,PATCH,DELETE,POST,PUT",
"Access-Control-Allow-Headers": "*"
}
}
]
}
И я настроил axios для использования учетных данных и установил для учетных данных значение true в файле Express index.js. И set-cookie работает:
введите сюда описание изображения
Буду признателен за любую помощь.
Я пробовал несколько раз менять заголовки, но ни одна комбинация не работает.
Подробнее об этой теме можно прочитать здесь: expressjs.com/en/guide/… . Также здесь expressjs.com/en/resources/middleware/cookie-session.html
@WeDoTheBest4You Привет! Большое спасибо за помощь! Я добавил строку app.set('trust proxy', true), но, похоже, это не имеет никакого эффекта. Я посмотрел статью про cookie-сессию, но не совсем понял. Сейчас единственное, что я использую для файлов cookie, — это анализатор файлов cookie. Как мне следует использовать сеанс cookie, если это необходимо?
Привет! Насколько я понимаю на данный момент, Версель использует механизм - переписывает вместо прокси-сервера. Поэтому настройка доверенного прокси не имеет никакого эффекта. Я не знал этого раньше. Метод response.cookie и промежуточное программное обеспечение анализатора файлов cookie — два основных способа обработки файлов cookie. В то время как response.cookie записывает файлы cookie для исходящих запросов или ответов, cookie-parser считывает файлы cookie из входящих запросов. Я отослал вас к сеансу cookie, поскольку это промежуточное программное обеспечение оказывает определенное влияние при наличии прокси-сервера. Однако в случае с Верселем это не так.
...Это не обязательно при работе с файлами cookie. В основном он используется в тех случаях, когда требуется отслеживание сеансов пользователей.
Ответы 1
Ниже приведен минимальный пример кода, показывающий, как файл cookie проходит цикл запрос-ответ. Этот пример был развернут в Верселе и там работает. Вывод, показанный ниже, взят из предварительного просмотра развертывания. Посмотрите, полезно ли свериться с вашим кодом, чтобы выявить какие-либо различия в настройке.
Также обратите внимание, что в этом примере в качестве внешнего интерфейса используется HTML-страница. Он обслуживается с того же экспресс-сервера, на котором также размещен API. Поэтому в этом нет никакого CORS.
Примечание:
Сначала я попытался создать еще один пример со сценарием CORS. Однако мне не удалось успешно развернуть его в Верселе, поскольку его настройки CORS не совпадали.
index.js
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
app.use(express.static('public'));
app.use(cookieParser());
app.get('/cookie', (req, res) => {
let response;
if (req.cookies?.somecookie) {
response = 'Same cookie: A cookie received and the same sent to client';
} else {
res.cookie('somecookie', 'cookie text');
response = 'New cookie: A new cookie created and sent to the client';
}
res.send(response);
});
app.listen(4000, () => {
console.info(`L@4000`);
});
module.exports = app;
Индекс.html
<!DOCTYPE html>
<html>
<head>
Cookie tests header
</head>
<body>
<br />
<br />
Cookie tests body
<br />
<br />
<p></p>
</body>
<script>
const p = document.querySelector('p');
fetch('/cookie', {
method: 'GET',
})
.then((response) => {
if (!response.ok) {
p.textContent = 'Error occured';
}
return response.text();
})
.then((data) => {
p.textContent = data;
});
</script>
</html>
Vercel.json
{ "version": 2, "rewrites": [{ "source": "/(.*)", "destination": "/api" }] }
Результаты теста:
- При загрузке сайта API создает новый файл cookie, как показано на снимке экрана браузера ниже.
- При обновлении сайта API отправляет тот же файл cookie обратно, что показывает, что тот же файл cookie проходит цикл запрос-ответ.
Благодарим Вас за подтверждение. Это был общий ответ на вопрос. Если возможно, помогите нам узнать фактическую причину сбоя и исправление, которое вы применили в своем случае. Если то же самое будет обновлено как собственный ответ, комментарий или обновление самого вопроса, это также поможет другим.
Привет. Спасибо за вопрос. В отличие от среды разработки, экспресс-сервер в производственной среде. в основном работать через прокси. Поэтому он должен доверять прокси-серверу, чтобы правильно перенаправить клиентский запрос. Если этого не происходит, экспресс-сервер может вести себя иначе в рабочей среде, чем в разработке. Поэтому попробуйте установить доверенный прокси как app.set('trust proxy', true).