Połączenie uwierzytelniania Spring Security z plikami cookie a nagłówkiem autoryzacji

Question

Używam Spring Security do uwierzytelniania mojego interfejsu REST API. Uwierzytelnianie działa poprawnie, a program Spring Security zwraca token z numerem Set-Cookie. Funkcja rememberMe jest włączona, a ta sama jest zwracana w pliku cookie.

Kiedy wysyłam kolejne żądania, uwierzytelnianie kończy się niepowodzeniem, chyba że wyślę nazwę użytkownika/hasło w nagłówku Authorization, podczas gdy kiedy testuję listonosza, to działa. Widzę, że dodaje on JSESSIONID do pliku cookie w żądaniu.

Od czasu ciasteczka jako pliku cookie Http-Only, nie sądzę, że mogę je odczytać w mojej funkcji JavaScript.

Jak mogę uwierzytelnić użytkownika? Byłem przy założeniu, że jeśli serwer zwróci plik cookie z set-cookie, przeglądarka powinna automatycznie dołączyć go do każdego żądania.

żądanie logowania klienta:

context.$http.get(url, { 
    headers: 
    { 
     'Access-Control-Allow-Origin': '*', 
     'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE', 
     'Authorization': auth 
    } 
    } 

Żądanie nagłówki:

Accept:*/* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4 
Access-Control-Request-Headers:access-control-allow-methods,access-control-allow-origin,authorization 
Access-Control-Request-Method:GET 
Connection:keep-alive 
DNT:1 
Host:localhost:9000 
Origin:http://localhost:8080 
Referer:http://localhost:8080/login?redirect=%2F 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 

nagłówki odpowiedzi:

Access-Control-Allow-Credentials:true 
Access-Control-Allow-Origin:http://localhost:8080 
Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
Content-Length:13 
Content-Type:application/json;charset=UTF-8 
Date:Fri, 18 Aug 2017 05:40:55 GMT 
Expires:0 
Pragma:no-cache 
Set-Cookie:remember-me=dTVTMi94dnVkQzJtYXRFYmJkR1VKZz09OjA1T1F4RXVOV0RiTEx4VFdUSVByeGc9PQ; Max-Age=86400; Expires=Sat, 19-Aug-2017 05:40:55 GMT; Path=/; Secure; HttpOnly 
Set-Cookie:JSESSIONID=4A856E0216191E8601100B600E4A227B; Path=/; HttpOnly 
Vary:Origin 
X-Content-Type-Options:nosniff 
X-Frame-Options:DENY 
X-XSS-Protection:1; mode=block 

kolejne żądania, aby uzyskać dane:

this.$http.get(url).then(function (res) { 
      this.items = res.data 
     }) 

Żądanie

Klient: odpowiedź

Accept:application/json, text/plain, */* 
Accept-Encoding:gzip, deflate, br 
Accept-Language:en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4 
Connection:keep-alive 
DNT:1 
Host:localhost:9000 
Origin:http://localhost:8080 
Referer:http://localhost:8080/Languages 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 

Serwer:

HTTP/1.1 401 
X-Content-Type-Options: nosniff 
X-XSS-Protection: 1; mode=block 
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Pragma: no-cache 
Expires: 0 
X-Frame-Options: DENY 
Access-Control-Allow-Origin: http://localhost:8080 
Vary: Origin 
Access-Control-Allow-Credentials: true 
WWW-Authenticate: Basic realm="Realm" 
Content-Type: application/json;charset=UTF-8 
Transfer-Encoding: chunked 
Date: Fri, 18 Aug 2017 05:43:26 GMT 

{timestamp: 1503038407254, status: 401, error: "Unauthorized",…} 
error : 
"Unauthorized" 
message:"Full authentication is required to access this resource" 
path:"/languages" 
status:401 
timestamp:1503038407254 

Dodawanie withCredentials : true:

GET /languages HTTP/1.1 
Host: 192.168.16.142:12345 
Connection: keep-alive 
Access-Control-Allow-Origin: * 
Accept: application/json, text/plain, */* 
Origin: http://localhost:8080 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 
Access-Control-Allow-Methods: GET,PUT,POST,DELETE 
DNT: 1 
Referer: http://localhost:8080/languages 
Accept-Encoding: gzip, deflate 
Accept-Language: en-GB,en;q=0.8,fr;q=0.6,en-US;q=0.4 

Response:

Access-Control-Allow-Origin:* 
Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
Content-Type:application/json;charset=UTF-8 
Date:Mon, 21 Aug 2017 06:26:24 GMT 
Expires:0 
Pragma:no-cache 
Transfer-Encoding:chunked 
Vary:Origin 
WWW-Authenticate:Basic realm="Realm" 
X-Content-Type-Options:nosniff 
X-Frame-Options:DENY 
X-XSS-Protection:1; mode=block 

FYI: Używam vuejs w interfejsie.

Answer 1

Po dokładnym przeanalizowaniu Twojego przepływu odpowiedzi/żądań wysyłane są żądania z portu 8080 do portu 9000, które wyzwalają reguły zasady tego samego pochodzenia (CORS). Domyślnie żądania CORS nie wysyłają poświadczeń/plików cookie, jak udokumentowano w poniższym łączu. Aby włączyć propagowanie poświadczeń/plików cookie, musisz ustawić flagę "withCredentials" w swoim wywołaniu AJAX.

Co więcej, wygląda na to, że używasz vuejs. Aby włączyć poświadczenia, musisz użyć poniższego ustawienia.

Vue.http.options.credentials = true; 

MDN - Request with credentials