web-dev-qa-db-fra.com

Définir des cookies pour les requêtes d'origine croisée

Comment partager les cookies croisés d'origine? Plus spécifiquement, comment utiliser le Set-Cookie en-tête en combinaison avec l’en-tête Access-Control-Allow-Origin?

Voici une explication de ma situation:

J'essaie de définir un cookie pour une API qui s'exécute sur localhost:4000 dans une application Web hébergée sur localhost:3000.

Il semble que je reçois les bons en-têtes de réponse dans le navigateur, mais malheureusement ils n’ont aucun effet. Ce sont les en-têtes de réponse:

 HTTP/1.1 200 OK 
 Contrôle d’accès-Autoriser-Origine: http: // localhost: 3000 
 Vary: Origine, Accepter-Encoder 
 Set-Cookie : jeton = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7; Max-Age = 86400; Domain = localhost: 4000; Path = /; Expire = mardi 19 septembre 2017 21:11:36 GMT; HttpOnly 
 Content-Type: application/json; charset = utf-8 
 Content-Length: 180 
 ETag: W/"b4-VNrmF4xNeHGeLrGehNZTQNwaaUU" 
 Date: lundi, 18 septembre 2017 21:11:36 GMT 
 Connexion: garder en vie

De plus, je peux voir le cookie sous Response Cookies lorsque j'inspecte le trafic à l'aide de l'onglet Réseau des outils de développement de Chrome. Pourtant, je ne vois pas de cookie en cours d’installation dans l’onglet Application sous Storage/Cookies. Je ne vois aucune erreur CORS, alors je suppose que je manque quelque chose d'autre.

Aucune suggestion?

Mise à jour I:

J'utilise le module request dans une application React-Redux pour envoyer une requête à un /signin noeud final sur le serveur. Pour le serveur j'utilise express.

Serveur Express:

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

Demande dans le navigateur:

 request.post ({uri: '/ signin', json: {userName: 'userOne', mot de passe: '123456'}}, (err, response, body) => {
// faire des choses 
})

Mise à jour II:

Je mets les en-têtes de requête et de réponse à présent comme des fous, en veillant à ce qu'ils soient présents à la fois dans la requête et dans la réponse. Ci-dessous une capture d'écran. Notez les en-têtes Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods et Access-Control-Allow-Origin. En regardant le problème que j'ai trouvé à github d'Axios , j'ai l'impression que tous les en-têtes requis sont définis. Pourtant, il n'y a toujours pas de chance ...

enter image description here

authenticationcookiescorshttp-headerslocalhost
27
Pim Heijden

Qu'as tu besoin de faire

Pour autoriser la réception et l'envoi de cookies par une demande CORS, procédez comme suit.

Back-end (serveur): Définissez l'en-tête HTTP Access-Control-Allow-Credentials valeur à true. Assurez-vous également que l’en-tête HTTP Access-Control-Allow-Origin est défini.

Front-end (client): Définissez le XMLHttpRequest.withCredentials flag à true, ceci peut être réalisé de différentes manières en fonction de la bibliothèque requête-réponse utilisée:

Ou

Évitez d’utiliser CORS en combinaison avec des cookies. Vous pouvez y parvenir avec un proxy.

Si pour une raison quelconque tu ne l'évites pas. La solution est ci-dessus.

Il s'est avéré que Chrome ne créera pas le cookie si le domaine contient un port. Le régler pour localhost (sans port) n'est pas un problème. Merci beaucoup - Erwin pour ce conseil!

55
Pim Heijden