#Que tal como estan Tengo un pequeño
cinder flume
las apis estan en el mismo dominio?
osea, la api (backend) está en el localhost:5000 y el frontend (nextjs) está en el localhost:3000
noble ibex
no, la api la tengo en railway
y el front en vercel
incluso subi el front en railway para ver si era por temas de dominio pero tampoco funciono
cinder flume
claro, ahi está la discordancia
debes habilitar para que tu backend pueda settear la cookie globalmente (cualquier dominio)
que usas para el backend?
cinder flume
usas express-session no?
cinder flume
Osea, me refiero para settear la cookie
noble ibex
te paso el repo
cinder flume
o para gestionar la session
noble ibex
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const apiTest = require('./api/test')
const apiPostHandler = require('./api/postHanlder')
const apiLogin = require('./api/auth/login')
const allowedOrigins = ['http://localhost:3000', 'https://unaopinionmas.vercel.app', 'https://nobodycares.up.railway.app'];
//Expres start
const app = express()
app.use(cors({
origin: function (origin, callback) {
if (!origin || allowedOrigins.includes(origin)) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
},
credentials: true
}));
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Private-Network', 'true');
next();
});
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json())
app.use(cookieParser())
app.use(express.static('public'));
app.use('/api', apiTest, apiPostHandler, apiLogin)
const PORT = process.env.PORT || 4000
app.get('/', (req, res) => {
res.redirect('https://unaopinionmas.vercel.app')
})
app.post('/', (req, res) => {
res.status(405).send('Esta API no recibe metodos POST')
})
app.put('/', (req, res) => {
res.status(405).send('Esta API no recibe metodos PUT')
})
app.delete('/', (req, res) => {
res.status(405).send('Esta API no recibe metodos DELETE')
})
app.listen(PORT, () => {
console.log(Server running on port ${PORT})
})
module.exports = app;
Este es mi index
cinder flume
usas nextjs 13 con app dir?
.
noble ibex
const cors = require('cors')
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const apiTest = require('./api/test')
const apiPostHandler = require('./api/postHanlder')
const apiLogin = require('./api/auth/login')
const allowedOrigins = ['http://localhost:3000', 'https://unaopinionmas.vercel.app', 'https://nobodycares.up.railway.app'];
//Expres start
const app = express()
app.use(cors({
origin: function (origin, callback) {
if (!origin || allowedOrigins.includes(origin)) {
callback(null, true);
} else {
callback(new Error('Not allowed by CORS'));
}
},
credentials: true
}));
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Private-Network', 'true');
next();
});
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json())
app.use(cookieParser())
app.use(express.static('public'));
app.use('/api', apiTest, apiPostHandler, apiLogin)
const PORT = process.env.PORT || 4000
app.get('/', (req, res) => {
res.redirect('https://unaopinionmas.vercel.app')
})
app.post('/', (req, res) => {
res.status(405).send('Esta API no recibe metodos POST')
})
app.put('/', (req, res) => {
res.status(405).send('Esta API no recibe metodos PUT')
})
app.delete('/', (req, res) => {
res.status(405).send('Esta API no recibe metodos DELETE')
})
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`)
})
module.exports = app;```y de paso muestrame que hace el api auth login
noble ibex
esta es la api de auth:
const router = express.Router()
const fs = require('fs')
const jwt = require ("jsonwebtoken")
const path = require('path')
const { serialize } = require('cookie')
router.get('/auth/login', (req, res) =>{
res.status(401).send('Peticion invalida')
})
router.post('/auth/login', (req, res, next) =>{
const data = req.body
//console.log(data)
if(data.user === '' || data.email === ''){
return res.status(400).send('Se requieren llenar los dos campos')
}
//Get Users
usersFilePath = path.join(process.cwd(), 'users/users.json')
const usersFile = fs.readFileSync(usersFilePath, 'utf8')
const usersJson = JSON.parse(usersFile)
//console.log(usersJson)
const user = usersJson.find(user => user.email === data.email)
//console.log(user)
if(!user){
return res.status(404).send('User not Found')
}
if (user.password === data.password){
const token = jwt.sign({
exp: Math.floor(Date.now() / 1000) + 60 * 60,
email: user.email,
username: user.username,
credentials: user.credentials
}, 'nbc')
const serialized = serialize('nbcAuth', token, {
httpOnly: true,
secure: true,
sameSite: 'none',
maxAge: 1000 * 60 * 60 * 7,
path: '/'
})
res.setHeader('Access-Control-Allow-Private-Network', 'true')
res.setHeader('Set-Cookie', serialized)
return res.status(200).json({message:'login success', nbcAuth:token, login: true})
}else{
return res.status(401).send('Contraseña incorrecta')
}
})
module.exports = router
vale, aqui pasas como header la cookie
emm, tu codigo de nextjs donde haces el fetch como es?
la unica solucion que veo es settear manualmente el token en una cookie
noble ibex
//const response = await axios.post('http://localhost:4000/api/auth/login', credentials, {
withCredentials: true
})```sin usar serialize
?
cinder flume
ahhh vale usas searialize jajaaja no lo vi
noble ibex
Lo raro es que en Local su funciona, supongo que es por que los dos estan en "localhost"
y como enseño en las imagenes, si recibe la cookie, pero no la lamacena
cinder flume
Puedes ver si te deja añadir este option al serialize?
domain: 'mydomain.com' //reemplazalo con tu dominio
con el dominio que hace la peticion?
noble ibex
aaah si creo si, por que al ver la cookie en chrome, el dominio es el de la api
no el que hace la peticion
tiene una opcion llamada path
cinder flume
mmm, path no
debería ser "domain"
que opciones tiene?
tambien vi que con añadir :
app.set('trust proxy', 1)
era suficiente
cinder flume
como?
noble ibex
en la opcion 'Domain que me dices que agregue'
solo recibe 1 dominio o puede recibir varios
cinder flume
si serialize no te da la opcion para añadirla no funcionará
noble ibex
deja pruebo
cinder flume
pero para que sean varios puedes hacerlo tipo:
domain: ["domain1.com", "domain2.com"]
me aparce que la cookie fue bloqueada para resguardar el dominio actual
formal fox
pregunta, la app cliente y la app server estan ambas con https?
noble ibex
asi es
formal fox
es que como en la imagen mandas http://localhost:3000
cinder flume
es que como en la imagen mandas http://localhost:3000
uno es en local y otro ya desplegado
noble ibex
los dos ya desplegados
cambiare serialize por lo siguiente
res.cookie('nbcAuth', token, {
httpOnly: true,
secure: true,
sameSite: 'none',
maxAge: 1000 * 60 * 60 * 7,
path: '/',
domain: 'unaopinionmas.vercel.app'
})
cinder flume
el problema es con el cookie.serialize que no "guarda bien" la cookie
cinder flume
res.cookie('nbcAuth', token, {
httpOnly: true,
secure: true,
...
para eso tienes que usar cookie-parser si no me equivoco, no?
que creo que te sería mas conveniente que serialize
formal fox
lo pregunto porque la opcion secure: true, solo funciona si donde se va a guardar la cookie tiene https
cinder flume
donde dice httpOnly ponlo en false (Si estas en local) o en true (ya desplegado)
noble ibex
va
noble ibex
pero lo estoy probando en produccion
por que en local si funciona bien
el problema solo es cuando lo despliego
cinder flume
claro, en local el httpOnly funciona
pero al desplegarlo pasa a ser https
por lo que no está setteando la cookie
noble ibex
osea que al desplegarolo, lo pongo el false?
cinder flume
ps de ultima prueba
noble ibex
va
cinder flume
sisigue sin funcionar migras a cookie-parser y listo
noble ibex
va
cinder flume
va
y como fue, sirvió o al final nada
Anda mira, si aceptaba la opción de domain jajaja
noble ibex
lo curioso es que me bloque el dominio
el unico que no me bloquea es el de la propia api
pero aunque la recibe
sigue sin guardarla
formal fox
estas usando chrome?
formal fox
yo recuerdo que en la consola, en la parte de red
noble ibex
formal fox
cuando me llega el header con la cookie, chrome muestra un triangulo de exclamacion cuando hay un problema con la cookie y no la puede guardar
cinder flume
No te las guarda en la página?
noble ibex
no
cinder flume
Justo ahí sale un triángulo como dice manuel jajajaj
formal fox
parate encima del triangulo, alli te debe decir el problema
noble ibex
si
es elo que me dice del dominio
pero si no agrego dominio
no me muestra erro
pero no me guarda la cookie
formal fox
puedes pasar imagen de lo que sale en el triangulo?
cinder flume
Claro porque la cookie se guarda por defecto en la URL de la api
Cómo estás añadiendo el dominio en las options del cookie-parser o el serialize?
cinder flume
me refiero como lo pasas
noble ibex
el unico dominio que no bloquea, es el de la api
cinder flume
O como lo estás colocando
