Как реализовать передачу кук сейсии на express.js и vue.js на разных портах?

Question

[kuzubina]

Запускаю сервер на порту 3001 и фронт на 8080, бэк после авторизации отдает куку сейсии в хедере но браузер с фронтом работающий на другом порту не дает сохранить куку сейсии для дальнейшего использования. Пробовал менять параметры куки, в модуле cors добавляю хосты.... ничего не помогает. Как можно решить эту проблему?

Answer 1

[Алексей Ярков]

Как можно решить эту проблему?

Traefik + Docker + mkcert решают проблему навсегда. Расписывать как их вместе завести это не влезет в ответ к этому вопросу.
Просто рекомендую ознакомиться с приведёнными технологиями.
Docker - запускаем 2 контейнера с фронтом и бэком
Traefik - маршрутизирует запросы между контейнерами
Mkcert - генерирует SSL сертификаты, которые можно использовать с Traefik локально

Comments

[Александр Панков]

Алексей Ярков здравствуйте, у меня похожая проблема, это из-за разных портов, верно?

Можете скинуть ссылку на доку, где расписано, что браузер не будет ставить куки если она пришла с другого порта (если в этом дело)?

[Алексей Ярков]

Александр Панков, ну вот например обсуждения есть

https://stackoverflow.com/questions/1612177/are-ht...

Answer 2

[Александр Панков]

Столкнулся с такой же проблемой, как я понял куки не ставится так как разные порты, верно?

Не могу найти документации чтобы подтвердить догадку, вы находили подробную информацию?

Comments

[kuzubina]

Да, не ставятся из-за разных портов
Я решил это с помощью SSL сертификатов для експерса и для vue

[Александр Панков]

kuzubina, а как связаны порты и ссл? Подскажите пожар как именно это решает проблему?

[kuzubina]

тут генерерую ssl для локалхоста SSL
для експреса в режиме разработки добавляем
//SSL for dev mode
if (process.env.HTTPS === 'true') {
const fs = require('fs')
var privateKey = fs.readFileSync(process.env.PRIVATE_KEY);
var certificate = fs.readFileSync(process.env.CERT);
sessionOptions.cookie.sameSite = "none"
sessionOptions.cookie.secure = true
}
и запускаем
// start server on HTTPS for develop mode
const startHttps = async () => {
try {
await sequelize.authenticate()
await sequelize
.sync({alter: true})
.catch((err) => console.log(err));
await store.connect();
userManager.listen(app);
app.use('/api', apiRouter)
app.use('/api', loginHandler)

https.createServer({
key: privateKey,
cert: certificate
}, app).listen(PORT, () => console.log(`Server started on port ${PORT}`))
} catch (e) {
console.log(e)
}
}

для vue в режиме разработки в vue.config.js

if (process.env.HTTPS === 'true') {
config.devServer = {
https: {
key: fs.readFileSync(process.env.PRIVATE_KEY),
cert: fs.readFileSync(process.env.CERT),
public: 'https://localhost:8080/',
}
}
}