Angulars nie wysyła cookies

Question

Cześć.

Mam problem w sowim projekcie z wysyłanie nagłówków cookies przez Angulara 9.

Klasa dodająca do nagłówek authenticaation i cookies: 

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(
    private authenticationService: AuthenticationServiceService,
    private cookiesService: CookieService,
    ) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const cookies = this.cookiesService.get('2fa_auth');
    const currentUser = this.authenticationService.currentUserValue;

    if (currentUser && currentUser.token) {

      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
          Cookie: `2fa_auth=${cookies};`,
        }
      });
    }
    
    return next.handle(req);
  }

}

i mój module odpowiedzialny za podpięcie tej klasy:

providers: [
    {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
    {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
    CookieService
  ],

Problem jest taki, że po wysłaniu zapytania nie ma w nagłówku w ogóle cookies.

Przyznam, że nie wiem gdzie robię błąd. Z góry dziękuje za wskazówkę.

Comments

Problem dokładnie leżał na back-enddzie. Brakowało dodanie Cookies do allow_headers Nie wiem czemu na postmanie działo bez tego a na angularze nie.

---

no to jest tpo co pisałem ze problem bedzie po stronie konfiguracji bo parametr Authorization 

withCredentials: true

juz z automatu powinien dodawac cookie 

---

Zgadza się problem był na bac-endzie. Tylko dziwne, że postman bez problemu wysyłał a cookie a angular już nie.

---

Możliwe że dlatego, że Postman nie ma mechanizmu Same-Origin-Policy (albo jest domyślnie wyłączony) w przeciwieństwie do przeglądarki. Dlatego Postmanowi nie przeszkadza brak nagłówków Access-Control-* z serwera.

---

W sumie racja to miało by sens.

Chciałbym wam podziękować za pomoc i poświęcony czas w rozwiązaniu tego problemu.

Answer 1

Pytanie takie czy w lini nie przypadkiem, nie powinno usunąc się średnika ? 

    Cookie: `2fa_auth=${cookies};`,

 

Comments

Raczej nie, bo w ten sposób definiuje się nagłówek z ciastkami - jest to lista par `klucz=wartość` oddzielona średnikami - w sumie w dokumentacji jest wzmianka o średniku i spacji, więc może brakuje spacji. :P

---

masz namyśli coś takiego ?

req = req.clone({
        withCredentials: true,
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
          Cookie: `auth=31341`,
        },
      });

Dalej wywala ten błąd. Ale ciekawe jest, że w Postmanie działa wszystko normalnie.

---

@ScriptyChris, Dodałem spacje, ale nic to nie zmieniło 

---

Sprawdź jeszcze nagłówek Access-Control-Allow-Credentials, o którym wspominałem - skoro to działa na kliencie nie-przeglądarkowym, to przyczyną może być brak w.w nagłówka lub CORS.

---

Teraz to już się zagubiłem. 

Chodzi Ci, żeby to dodać do nagłówków wysyłanych przez angulara ?

Sprawdziłem jeszcze na firefox bo tu więcej się błędów pojawiło: 

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://127.0.0.1:8088/api/authentication” (oczekiwano „true” w nagłówku CORS „Access-Control-Allow-Credentials”).

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://127.0.0.1:8088/api/authentication” (nieudane żądanie CORS).

ERROR Unknown Error

 

---

Dodałem do back-endu ten nagłówek :

Access-Control-Allow-Credentials: true

I firefox zaczęła w końcu wysyłać zapytania(Bo przedtem nie chciała przez ten błąd). Ale dalej nie chce podpiąć nagłówka, ale daje taki błąd :

Próba ustawienia zabronionego nagłówka „Cookie” została zablokowana.

 

---

 withCredentials: true,

jeśli przekażesz opcję, {withCredentials: true}Twoja przeglądarka automatycznie wyśle ​​wszystkie dostępne pliki cookie wraz z Twoją prośbą. W ten sposób nie musisz ręcznie dodawać plików cookie moim zdaniem 

To co już kolega tez mówił Upewnij się również, że nagłówki HTTP Access-Control-Allow-Origini Access-Control-Allow-Headers są ustawione, a nie z symbolem wieloznacznym* .

---

Moje nagłówki odpowiedzi od serwera :

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Expose-Headers: link
Cache-Control: no-cache, private
Connection: close
Content-Type: application/json
Date: Tue, 05 Jan 2021 08:56:52 GMT
Date: Tue, 05 Jan 2021 08:56:52 GMT
Host: 127.0.0.1:8088
Link: <http://127.0.0.1:8088/api/docs.jsonld>; rel="http://www.w3.org/ns/hydra/core#apiDocumentation"
Vary: Accept
X-Powered-By: PHP/7.3.19

i nagłówki zapytania:

HTTP/1.1 500 Internal Server Error
Host: 127.0.0.1:8088
Date: Tue, 05 Jan 2021 08:56:52 GMT
Connection: close
X-Powered-By: PHP/7.3.19
Content-Type: application/json
Vary: Accept
Cache-Control: no-cache, private
Date: Tue, 05 Jan 2021 08:56:52 GMT
Access-Control-Allow-Origin: http://localhost:4200
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: link
Link: <http://127.0.0.1:8088/api/docs.jsonld>; rel="http://www.w3.org/ns/hydra/core#apiDocumentation"
GET /auth/panel HTTP/1.1
Host: 127.0.0.1:8088
Connection: keep-alive
Accept: application/json, text/plain, */*
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE2MDk4MzcwMTEsImV4cCI6MTYwOTg0NTYxMSwicm9sZXMiOlsiUk9MRV9VU0VSIl0sInVzZXJuYW1lIjoidG9yaW4ifQ.GICkIdL5W3Cvn-1408PYx6or1kW7ftEtn6vaH7OB9S1sMg_zeJIQuk0sNTavWV37cBy31p6EJY5o05_kvhzYlXH1d4l-su0jEQb1OOXdDaufOBZoHcB0hYSqJJgC-dQjQv2volUVrzhmyy4fR1cj1X_xqewpdsk-NWxUL9h9-G288I4TrAI07blvk9OOWIqorClVTCVZdxeTay0XhBDxEakIvKiQ9cZVEjNXbpYdawOS8Fh3f5-oOew18Qp6EUzm_Ymcmd2LdDhTQt2kiE8jl7xCtxd3tZxHjBj-lUXDIzsUWNO61jY9t9zqRbfscHJaehIUJzofDnNHiN5k4ZFknZCOyZ-685Vx-KNq-evRfLO-UrYY67KdmT04B6s2XdzJJEZtbons5VKM-niBqLf3pJ5ykX27Pbe5jL6gIUFDQZ05Beu6sT-aIUCYBbRMYuuQ_xUQRepwTJ3W_eJUMV1lmR8sf64V1lFcFqAsL42KGBbTpXAzf4eVcEJ7-DMVZ_A5rM6_Ym1-bCeJP6jmxtXSJYWeojG0MAOBBE4CRNrlXpcO-Y-b5PBTEikqvHv72xWz-5k5lo4pUHun3cbIPqDZXj1HCv8snBDsVDLHGnw568WSTYihqobvTyMuqhN7CqOdJ7bb2FsHJHOSSz97FiosJ3jWs_uF6Gg4nuCPSkr4V-g
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Origin: http://localhost:4200
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: pl-PL,pl;q=0.9,en-GB;q=0.8,en;q=0.7,en-US;q=0.6
dnt: 1

 

W kodzie mam tak jak pisaliście z ustawieniem tej flagi na true :

 if (currentUser && currentUser.token) {

      req = req.clone({
        withCredentials: true,
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
         \\ Cookie: `auth=121212` tą linie kodu wywaliłem
        },
      });
    }

Po usunięciu już nie wywaliła mi błędów lecz nie podpina mi cookie 

---

withCredentials, Set-Cookiew odpowiedzi zostanie ustawiona przez klienta, ale klient nadal nie wyśle Cookie w żądaniu (które zostało ustawione przy poprzednim żądaniu)
https://angular.io/guide/deprecations#http

withCredentials: true. -> to Ci praktycznie nie działa, lub konfiguracja Credentionali jest błędna bo wystarczy to dodać  :) żeby uzyskać cookie.
Nie wiem jak wygląda konfiguracja Interceptora. Błąd wynika z konfiguracji creditionali w takim razie, skoro przy użyciu  opcji true nie ma cookie domyślnie.

---

withCredentials, Set-Cookiew odpowiedzi zostanie ustawiona przez klienta, ale klient nadal nie wyśle Cookie w żądaniu (które zostało ustawione przy poprzednim żądaniu)

Nie bardzo rozumiem co masz na myśli mówiąc w poprzednim  żądaniu ? 

withCredentials: true. -> to Ci praktycznie nie działa, lub konfiguracja Credentionali jest błędna bo wystarczy to dodać  :)

Ale co wystarczy dodać ? 

---

  withCredentials: true

jeśli napisałbyś poprawną konfiguracje, automatycznie cookies były by dodawane.  jeśli zastosoujesz Credentials na true. 

---

withCredentials: true

 Przecież mam w kodzie już  withCredentials: true :

req = req.clone({
        withCredentials: true,
        setHeaders: {
          Authorization: `Bearer ${currentUser.token}`,
        }
      });
    }

Czy to jest w takim razie nie poprawne ?

jeśli zastosoujesz Credentials na true

Rozumiem, że Ci chodzi o  withCredentials ? 

jeśli napisałbyś poprawną konfiguracje

Co jest nie poprawnego w mojej konfiguracji bo nie kumam  

---

mówiłem, że niepoprawnie ustawiłeś konfiguracje dla zapisywania dla listy uwierzytelnienia [withCredentials ] przez co  nie bylo cookie