0
408
Vistas¿Axios no crea una cookie a pesar de que el encabezado set-cookie está allí?
Interfaz: [Axios]
const formSubmit = async (e) => { e.preventDefault() const formData = new FormData(e.target) const email = formData.get('email') const password = formData.get('password') try { const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', { email, password, }) console.log(res.data) // its okay, I can login if email & password are correct. } catch (error) { console.log(error) } }Back-End [Nodejs ExpressJs]:
Dentro de App.js:
const cors = require('cors') app.use(cors({ credentials: true }))Dentro de Login.js (/auth/punto final de inicio de sesión):
// ... code, then... if email & password are correct: // 3600000ms = 1hour res.cookie('jwt', token, { httpOnly: true, expires: new Date(Date.now() + 3600000 }) res.status(200).json({ status: 'success' token, data: userDoc, })Luego, cuando inicio sesión en mi navegador:
Puedo iniciar sesión con éxito, pero no se crearán cookies, consulte:
- El servicio front-end http (aplicación reaccionar) se ejecuta en
http://172.16.2.19:3000 - El servicio http de back-end (expressjs) se ejecuta en
http://172.16.2.19:3001 - Las solicitudes de axios que envío desde el front-end solicitan:
http://172.16.2.19:3001
¿Entonces, cuál es el problema?
El problema de que no se crean cookies en el navegador me impide continuar con el diseño de la aplicación frontal, porque si quisiera solicitar algo de mi API, debo autenticarme, todas las rutas en la API que hice son protegido, por lo que si quisiera solicitar algo de la API, tendré que enviar mi token jwt junto con la solicitud.
editar **:
aquí está la respuesta del punto final /auth/login después de iniciar sesión correctamente:
- Estoy usando un navegador valiente, la última versión.
- Probé esto en Firefox, tiene el mismo comportamiento.
3 Respuestas
Responde la pregunta0
Verificaría pasando {withCredentials: true} como el tercer argumento del método axios para permitir que el navegador configure la cookie a través de la solicitud.
0
CHICOS CHICOS CHICOS Lo encontré!!!! después de 3 horas de investigación, déjame ahorrarte tiempo:
Para cualquiera que tenga el mismo problema, todo lo que tiene que hacer es
cambie su código de back-end de:
const cors = require('cors') app.use(cors({ credentials: true }))a
app.use(cors({ credentials: true, origin: true })) y asegúrese de usar withCredentials: true en el front-end con cada solicitud (el método POST de inicio de sesión y todas las demás solicitudes que requieren autenticación)
¿por qué?
establecer la propiedad de origin en verdadero reflejará el origen de la solicitud, la propiedad de origen puede ser una cadena si desea especificar un dominio en particular, por ejemplo: http://localhost:3000 . Pero si tiene más de un cliente, establecer esto en verdadero es una buena elección.
y para aquellos de ustedes que se preguntan acerca de los dispositivos móviles en caso de especificar una cadena para el campo de origen con un dominio en particular. Este problema de cors solo ocurre en los navegadores, cualquier otro cliente no usa esa política de CORS.
0
No creo que sea correcto usar el backend para guardar cookies, ya que las cookies son una característica del navegador separada de la base de datos. Aunque podría estar equivocado. Cuando la publicación sea exitosa, res devolverá un token. Guarda este token en el almacenamiento local del navegador.
const formSubmit = async (e) => { e.preventDefault() const formData = new FormData(e.target) const email = formData.get('email') const password = formData.get('password') try { const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', { email, password, }) //browsers local storage localStorage.setItem('access_token',res.data.access); localStorage.setItem('refresh_token',res.data.refresh); console.log(res.data) // its okay, I can login if email & password are correct. }Luego tendrá que crear un encabezado de autorización como tal
headers:{ Authorization: localStorage.getItem('access_token') ? 'JWT '+localStorage.getItem('access_token') : null }