http响应中缺少Angular2 JWT授权标头（添加了CORS支持）

Posted 2023-03-04

【中文标题】http响应中缺少Angular2 JWT授权标头（添加了CORS支持）

【英文标题】：Angular2 JWT Authorization header missing in http response (CORS support added)

【发布时间】：2017-07-29 04:53:51

【问题描述】：

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

在 http 请求中，我正在发送用户名和密码，并在响应的“授权”标头中期待令牌。当我使用 Postman 时一切正常，我收到包括“授权”在内的所有标题。

此外，当我在 Chrome 控制台中记录流量时（通过表单进行用户登录时）“授权”标头作为响应存在，因此很明显它会返回到浏览器。但是当我在我的角度应用程序中列出标题时，数组中只有几个标题：

   // 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 控制台的屏幕截图，您可以在其中看到所有需要的标头都存在于客户端：

服务器端令牌生成（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

    

【参考方案1】：

Authorization 标头存在，但由于它是自定义标头，浏览器将不允许您直接访问它，即使 chrome 会看到它。

为了解决您在 cors 配置中需要一个更重要的标题。

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

确保公开您希望您的应用可以访问的任何其他自定义标头。