Angular2 JWT Autorisierungskopf fehlt in HTTP-Antwort (CORS-Unterstützung hinzugefügt)

Question

Ich versuche, eine Autorisierung mit JWT (Json Web Token) zu tun. Am Frontend benutze ich Angular2, auf Back-End Spring REST API. Ich habe CORS-Filter auf Back-End-Seite hinzugefügt.

In HTTP-Anfrage senden ich Benutzername und Passwort und erwartet Token in "Autorisierung" Header der Antwort. Alles funktioniert gut, wenn ich Postman benutze, erhalte ich alle Header inklusive Autorisierung.

Wenn ich den Datenverkehr in der Chrome-Konsole aufzeichne (während ich mich über das Formular anmelde), ist der Header "Authorization" als Antwort vorhanden, so dass er offensichtlich zum Browser zurückkehrt. Aber wenn ich Header in meinem Winkel App-Liste, gibt es nur wenige Header in Array:

// auth.service.ts 

    login(username, password): Observable<boolean> { 

    // call remote service to authenticate user   
    return this.http.post(this.authUrl, JSON.stringify({ username: username, password: password })) 
     .map((response: Response) => { 

      console.log("Authorization header: " + response.headers.get('Authorization')); 
      console.log("all headers: " + response.headers.keys()); 

      // TODO - login successful if there's a jwt token in the response 

     });  
} 

Ergebnis dieser 2-Konsole ausgegeben:

Authorization header: null 

all headers: Pragma,Cache-Control,Expires 

Hier ist der Screenshot von Google Chrome-Konsole, wo Sie sehen können, dass alle benötigten Header vorhanden sind auf Client-Seite:

Server-seitige Token Generation (Frühjahr Boot):

public void addAuthentication(HttpServletResponse response, String username) throws UnsupportedEncodingException { 
    // Token generation 
    String JWT = Jwts.builder() 
      .setSubject(username) 
      .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION_TIME)) 
      .signWith(SignatureAlgorithm.HS512, secret.getBytes("UTF-8")) 
      .compact(); 

    response.addHeader(headerString, tokenPrefix + " " + JWT); 
} 

Hat jemand einen nützlichen Rat?

Dank

LÖSUNG:

public class CORSFilter implements Filter{ 


    @Override 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) 
      throws IOException, ServletException { 
     HttpServletResponse response = (HttpServletResponse) res; 
     response.setHeader("Access-Control-Allow-Origin", "*"); 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "x-requested-with"); 
     response.setHeader("Access-Control-Expose-Headers", "Authorization"); 
     chain.doFilter(req, response); 

    } 

    @Override 
    public void init(FilterConfig arg0) throws ServletException { 
     // TODO Auto-generated method stub 

    } 

    @Override 
    public void destroy() { 
     // TODO Auto-generated method stub 

    } 

} 

Answer 1

Authorization Header vorhanden ist, aber da es sich um eine benutzerdefinierte der Browser Sie es direkt auch für den Zugriff wird nicht zulassen, dass Header obwohl Chrom es sehen.

Um das zu lösen, brauchen Sie noch einen wichtigen Header in Ihrer Cors Config.

Access-Control-Expose-Headers: Authorization, CustomHeader2, e.tc 

Stellen Sie sicher, dass alle anderen benutzerdefinierten Header verfügbar sind, auf die Ihre App zugreifen soll.