web-dev-qa-db-fra.com

Set-Cookie sur le navigateur avec demande Ajax via CORS

Tentative d'implémentation d'un processus de connexion/inscription ajax (pas d'actualisation du site avec authentification). Utilisation de cookies pour préserver l'état. Je pensais que j'aurais cela maintenant, mais pour une raison quelconque, le navigateur ne définit pas de cookies après les avoir récupérés du serveur. Quelqu'un peut-il aider? Voici les en-têtes de demande et de réponse:

Request URL:http://api.site.dev/v1/login
Request Method:POST
Status Code:200 OK

En-têtes de demande

Accept:application/json, text/plain, */*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:57
Content-Type:application/json;charset=UTF-8
Host:api.site.dev
Origin:http://site.dev
Referer:http://site.dev/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11
withCredentials:true
X-Requested-With:XMLHttpRequest
Request Payload
{"email":"[email protected]","password":"foobar"}

En-têtes de réponse

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, Content-Type, withCredentials
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:http://site.dev
Connection:Keep-Alive
Content-Length:19
Content-Type:application/json
Date:Tue, 08 Jan 2013 18:23:14 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.2.22 (Unix) DAV/2 PHP/5.4.7 mod_ssl/2.2.22 OpenSSL/0.9.8r
Set-Cookie:site=%2B1THQQ%2BbZkEwTYFvXFVV5fxi00l2K%2B6fvt9SuHACTNsEwUGzDSUckt38ZeDsNbZSsqzHmPMWRLc84eDLZzh8%2Fw%3D%3D; expires=Thu, 10-Jan-2013 18:23:14 GMT; path=/; domain=.site.dev; httponly
X-Powered-By:PHP/5.4.7

Je vois également le cookie dans les outils réseau chrome, tel que renvoyé par le serveur:

Cookies de réponse

Name: site
Value: %2B1THQQ%2BbZkEwTYFvXFVV5fxi00l2K%2B6fvt9SuHACTNsEwUGzDSUckt38ZeDsNbZSsqzHmPMWRLc84eDLZzh8%2Fw%3D%3D
Domain: .site.dev
Path: /
Expires: Session
Size: 196
Http: ✓
ajaxhttpcookiescors
44
Calvin Froedge

Votre AJAX doit être effectuée avec les paramètres "withCredentials" définis sur true (uniquement disponible dans XmlHttpRequest2 et fetch):

    var req = new XMLHttpRequest();
    req.open('GET', 'https://api.bobank.com/accounts', true); // force XMLHttpRequest2
    req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    req.setRequestHeader('Accept', 'application/json');
    req.withCredentials = true; // pass along cookies
    req.onload = function()  {
        // store token and redirect
        let json;
        try {
            json = JSON.parse(req.responseText);
        } catch (error) {
            return reject(error);
        }
        resolve(json);
    };
    req.onerror = reject;

Si vous voulez une explication détaillée sur CORS, la sécurité de l'API et les cookies, la réponse ne tient pas dans un commentaire StackOverflow. Consultez cet article que j'ai écrit sur le sujet: http://www.redotheweb.com/2015/11/09/api-security.html

31
François Zaninotto

J'ai eu un problème similaire et il s'est avéré que les paramètres du navigateur bloquaient les cookies tiers (Chrome> Paramètres> Paramètres avancés> Confidentialité> Paramètres de contenu> Bloquer les cookies tiers et les données du site). Le déblocage a résolu le problème!

10
Andrew M. Andrews III