Cookie n'est pas défini sur angular Client

Question

J'ai une application backend in Django python et il est servi sur http: // localhost: 8000.

J'ai un angular Frontend qui est servi sur http: // localhost: 4200.

J'ai handicapé Cors sur Django. En frappant l'API de connexion sur http: // localhost: 8000/auth/login /, je reçois une réponse valide avec l'en-tête Set-Cookie.

Voici mon angular code pour imprimer les cookies:

  this.http.post<any>('http://localhost:8000/auth/login/', this.LoginForm, { observe: 'response' }).subscribe(response => {
   console.log("response is ", response);
   var cookies = this.cookieService.getAll();//('cookies');
   console.log("cookies is :", cookies);

Il imprime un objet vide sur la console. Comment faire ce travail? Je veux utiliser des cookies pour l'authentification.

Answer 1

Ensemble de cookies:

• Client: client1.client.com
• Server: Server1.Server.com

Une demande HTTP à partir de Angular dans client1.client.com à https://server1.server.com/api/v1/getsomething a Set-Cookie: JSESSIONID=xyz Dans l'en-tête de réponse. Le cookie sera mis sur server1.server.com et pas sur client1.client.com. Vous pouvez entrer server1.server.com Dans la barre d'URL et voir le cookie étant défini.

sans médrials:

Il n'y a pas besoin de l'application angular pour lire le cookie et l'envoyer dans les demandes suivantes. withCredentials La propriété de la demande HTTP peut être utilisée pour cela. Reportez-vous: - https://developer.mozilla.org/en-us/docs/web/api/xmlhttprequest/withpredentials =

Exemple:

public getSomething(): Observable<object> {
    const httpOptions = {
      withCredentials: true
    };
    return this.http.get(`${this.serverUrl}/getSomething`, httpOptions);
  }

Reportez-vous: https://angular.io/api/common/http/httpequest

withCredentials définira les cookies du domaine du serveur dans les demandes sur le serveur.

Comme mentionné précédemment Set-Cookie: JSESSIONID=xyz Dans la réponse de server1.server.com sera défini dans server1.server.com. The Angular App dans client1.client.com Need pas le lire. withCredentials prendra soin de cela.

problèmes de domaine croisés:

Dans mon examen récent du 20 mai 2020, j'ai constaté que Sans médrials ne fonctionne pas dans certains navigateurs lorsque le client et le serveur sont dans différents domaines.

• Dans Safari, le problème se produit lorsque "Empêcher le suivi du site internet" est activé (par défaut). La question est empêchée en désactivant la même chose. https://support.apple.com/en-in/guide/safari/sfri40732/mac
• IN Android applications, le problème peut être évité à l'aide de Chrome onglets personnalisés au lieu de Android Webview. https://github.com/newtonjoshua/custom-tabs-client , https://developer.chrome.com/multidevice/andrroid/customtabs

Même domaine:

On dirait que les navigateurs traditionnels se déplacent pour bloquer les cookies tiers.

• Safari - Blocage complet de cookie tiers et plus
• Chrome (d'ici 2022) - Construire un Web plus privé: une voie à suivre pour faire des cookies tiers obsolètes

La solution consiste à avoir à la fois le client et le serveur dans le même domaine.

• Client: client1.myapp.com
• Serveur: server1.myapp.com

Et dans le Set-Cookie La réponse inclut le domaine racine aussi. Exemple: "Jsessionid = xyz; domaine = .myapp.com; chemin = /"

Cela garantira que les cookies sont définis dans tous les cas.