Frontend приложения на Vue.js 3 залит на github, backend на node.js/express.js залит на Heroku. При авторизации куки не сохраняются в браузере, при этом запросы к БД первое время проходят, как будто бы куки обновляются, но через некоторое время все же появляется 401 ошибка. На localhost все исправно работает.
app.js
const express = require("express");
const cors = require("cors");
const config = require("config");
const cookieParser = require("cookie-parser");
const path = require("path");
const mongoose = require("mongoose");
const errorMiddleware = require("./middleware/error.middleware");
const app = express();
app.enable("trust proxy");
app.use(express.json({ extended: true }));
app.use(cookieParser());
app.use(
cors({
credentials: true,
origin: config.get("clientUrl"),
})
);
app.use("/api/auth", require("./routes/auth.routes"));
//...
app.use(errorMiddleware);
if (process.env.NODE_ENV === "production") {
app.use("/", express.static(path.join(__dirname, "../client", "dist")));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "../client", "dist", "index.html"));
});
}
const PORT = process.env.PORT || config.get("port");
async function start() {
try {
await mongoose.connect(config.get("mongoUri"), {
useNewUrlParser: true,
useUnifiedTopology: true,
});
app.listen(PORT, () =>
console.log(`App has been started on port ${PORT}...`)
);
} catch (e) {
console.log("Server Error", e.message);
process.exit(1);
}
}
start();
Код добавления cookies:
class UserController {
async registration(req, res, next) {
try {
const errors = validationResult(req);
if (!errors.isEmpty()) {
return next(
ApiError.BadRequest("Ошибка при валидации", errors.array())
);
}
const { email, password, name } = req.body;
const userData = await userService.registration(email, password, name);
res.cookie("refreshToken", userData.refreshToken, {
maxAge: 30 * 24 * 60 * 60 * 1000,
httpOnly: true,
secure: true,
sameSite: "none",
});
return res.json(userData);
} catch (e) {
next(e);
}
}
async login(req, res, next) {
try {
const { email, password } = req.body;
const userData = await userService.login(email, password);
res.cookie("refreshToken", userData.refreshToken, {
maxAge: 30 * 24 * 60 * 60 * 1000,
httpOnly: true,
secure: true,
sameSite: "none",
});
return res.json(userData);
} catch (e) {
next(e);
}
}
async logout(req, res, next) {
try {
const { refreshToken } = req.cookies;
const token = await userService.logout(refreshToken);
res.clearCookie("refreshToken");
return res.json(token);
} catch (e) {
next(e);
}
}
async refresh(req, res, next) {
try {
const { refreshToken } = req.cookies;
const userData = await userService.refresh(refreshToken);
res.cookie("refreshToken", userData.refreshToken, {
maxAge: 30 * 24 * 60 * 60 * 1000,
httpOnly: true,
secure: true,
sameSite: "none",
});
return res.json(userData);
} catch (e) {
next(e);
}
}
}
Firefox выдал:
Кука была отклонена, так как она находится в межсайтовом контексте и значением её атрибута «SameSite» является «Lax» или «Strict».
После этого я добавил
secure: true,
sameSite: "none",
При выходе (logout) в Firefox выдает
Кука «refreshToken» вскоре будет отклоняться, поскольку её атрибут «SameSite» установлен в значение «None» или в недопустимое значение, и в ней отсутствует атрибут «secure». Чтобы узнать больше об атрибуте «SameSite», прочитайте https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite logout
Кука «refreshToken» была отклонена, так как срок её действия уже истёк.
Chrome при загрузке сайта выдает
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
Добавил в
app.js app.enable("trust proxy");
, но и это проблему не решило.