CORS隐藏头是什么？

Question

我正在实现在我的Angular应用中使用HMAC的Spring Security时，注意到了一些奇怪的问题。

有人能解释一下为什么我在console.log中没有得到"X-HMAC-CSRF"、"X-Secret"和"WWW-Authenticate"的值吗？

console.log(JSON.stringify(response.headers()))
{"pragma":"no-cache","content-type":"application/json;charset=UTF-8","cache-
control":"no-cache, no-store, max-age=0, must-revalidate","expires":"0"}

虽然在网络(F12)中我能正确获取它们，但是却无法记录它们。 以下是一段代码：

public static final String WWW_AUTHENTICATE = "WWW-Authenticate";
public static final String X_SECRET = "X-Secret";
public static final String CSRF_CLAIM_HEADER = "X-HMAC-CSRF";

response.setHeader(X_SECRET, filteredUrl);
response.setHeader(WWW_AUTHENTICATE,HmacUtils.HMAC_SHA_256);
response.setHeader(CSRF_CLAIM_HEADER, csrfId);
response.addCookie(jwtCookie);

我还添加了一个CORS过滤器，因为后端和前端不在同一个域:

@Slf4j
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

@PostConstruct
public void init() {
    log.info("Setup cors filter");
}

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    //TODO ALLOW ALL ORIGIN ???
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Origin, If-Modified-Since, Accept, Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, X-Handle-Errors-Generically");

    chain.doFilter(req, res);
  }

- John

Answer 1

您还需要在服务器端设置一个Access-Control-Expose-Headers响应头，以使您的前端JavaScript代码能够访问这些头部信息。

response.setHeader("Access-Control-Expose-Headers",
    "X-HMAC-CSRF, X-Secret, WWW-Authenticate");

请参见https://developer.mozilla.org/docs/Web/HTTP/Headers/Access-Control-Expose-Headers。

- sideshowbarker