spring - http 响应中缺少 Angular2 JWT 授权 header (添加了 CORS 支持)

Question

我正在尝试使用 JWT(Json Web token )进行授权。在前端我使用 Angular2，在后端 Spring REST api 上。我在后端添加了 CORS 过滤器。

在 http 请求中，我发送用户名和密码，并期望在响应的“授权” header 中包含 token 。当我使用 Postman 时一切正常，我收到所有 header ，包括“授权”。

此外，当我在 Chrome 控制台中记录流量时(同时通过表单进行用户登录)响应中出现“授权” header ，因此很明显它会返回到浏览器。但是当我在我的 Angular 应用程序中列出标题时，数组中只有几个标题:

   // 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

        });     
} 

这两个控制台输出的结果是:

 Authorization header: null 

 all headers: Pragma,Cache-Control,Expires

这是来自 Google Chrome 控制台的屏幕截图，您可以在其中看到所有需要的 header 都出现在客户端:

服务器端 token 生成(Spring 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);
}

有没有人有一些有用的建议？

谢谢

解决方案:

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 存在，但由于它是自定义 header ，浏览器将不允许您直接访问它，即使 chrome 会看到它。

要解决这个问题，您需要在 cors 配置中添加一个更重要的 header 。

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

确保公开您希望您的应用有权访问的任何其他自定义 header 。