authentication - origin - Establecer cookies para solicitudes de origen cruzado

http withcredentials

Question

¿Cómo compartir cookies de origen cruzado? Más específicamente, ¿cómo usar el encabezado Set-Cookie en combinación con el encabezado Access-Control-Allow-Origin ?

Aquí hay una explicación de mi situación:

Estoy intentando configurar una cookie para una API que se ejecuta en localhost:4000 en una aplicación web que está alojada en localhost:3000 .

Parece que estoy recibiendo los encabezados de respuesta correctos en el navegador, pero no tienen ningún efecto. Estos son los encabezados de respuesta:

HTTP/1.1 200 OK Access-Control-Allow-Origin: http://localhost:3000 Vary: Origin, Accept-Encoding Set-Cookie: token=0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age=86400; Domain=localhost:4000; Path=/; Expires=Tue, 19 Sep 2017 21:11:36 GMT; HttpOnly Content-Type: application/json; charset=utf-8 Content-Length: 180 ETag: W/"b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ" Date: Mon, 18 Sep 2017 21:11:36 GMT Connection: keep-alive

Además, puedo ver la cookie en Response Cookies cuando inspecciono el tráfico utilizando la pestaña Red de las herramientas de desarrollo de Chrome. Sin embargo, no puedo ver una cookie configurada en la pestaña Aplicación en Storage/Cookies . No veo ningún error CORS, así que asumo que me estoy perdiendo algo más.

¿Alguna sugerencia?

Actualizar I:

Estoy usando el módulo de request en una aplicación React-Redux para emitir una solicitud a un punto final /signin en el servidor. Para el servidor utilizo expreso.

Servidor Express:

res.cookie(''token'', ''xxx-xxx-xxx'', { maxAge: 86400000, httpOnly: true, domain: ''localhost:3000'' })

Solicitud en el navegador:

request.post({ uri: ''/signin'', json: { userName: ''userOne'', password: ''123456''}}, (err, response, body) => { // doing stuff })

Actualización II:

Ahora estoy configurando los encabezados de solicitud y respuesta ahora como locos, asegurándome de que estén presentes tanto en la solicitud como en la respuesta. A continuación se muestra una captura de pantalla. Observe los encabezados Access-Control-Allow-Credentials , Access-Control-Allow-Headers , Access-Control-Allow-Methods y Access-Control-Allow-Origin . Viendo el problema que encontré en el github de Axios , tengo la impresión de que ahora están configurados todos los encabezados requeridos. Sin embargo, todavía no hay suerte ...

Answer 1

Qué necesitas hacer

Para permitir recibir y enviar cookies por una solicitud CORS con éxito, haga lo siguiente.

Back-end (servidor): establezca el valor del encabezado HTTP Access-Control-Allow-Credentials en true . Además, asegúrese de que el encabezado HTTP Access-Control-Allow-Origin esté configurado.

Front-end (cliente): developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… indicador developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… en true , esto se puede lograr de diferentes maneras dependiendo de la biblioteca de solicitud-respuesta utilizada:

• jQuery 1.5.1 xhrFields: {withCredentials: true}

• ES6 credentials: ''include'' fetch () credentials: ''include''

• axios : withCredentials: true

O

Evite tener que usar CORS en combinación con cookies. Puedes lograr esto con un proxy.

Si por alguna razón no lo evites. La solución está arriba.

Resultó que Chrome no configurará la cookie si el dominio contiene un puerto. Establecerlo para localhost (sin puerto) no es un problema. Muchas gracias a Erwin por este consejo!