Сайт работает отлично, когда серверная часть и внешний интерфейс развернуты локально (на двух разных портах), но файлы 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 работает:
введите сюда описание изображения
Буду признателен за любую помощь.
Я пробовал несколько раз менять заголовки, но ни одна комбинация не работает.
🤔 А знаете ли вы, что...
С Node.js можно легко создавать RESTful API с использованием фреймворков, таких как Express.js.
Ниже приведен минимальный пример кода, показывающий, как файл 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" }] }
Результаты теста: