rest - chrome 中缺少 Http Response header ，但在 Postman 中它们会出现

Question

在 Angular 中调用我的 REST 服务时，没有响应 header 。

Angular 中的登录方法

login(username: string, password: string) {
    const credentials = { "username": username, "password": password };
    return this.http.post(this.url, credentials)
      .subscribe(
        data => console.log(data), // JSON.stringify(data.headers) also is empty
        error => console.log(error)
      );
  }

Chrome 开发工具控制台中的输出

Response {_body: "", status: 200, ok: true, statusText: "OK", headers: Headers…}headers: Headers_headers: Map(0)_normalizedNames: Map(0)proto: Objectok: truestatus: 200statusText: "OK"type: 2url: "http://localhost:8080/backend/rest/login"_body: ""proto: Body

但是当我用 postman 发送相同的 post 请求时，我得到了预期的结果:

Access-Control-Allow-Credentials →true
Access-Control-Allow-Origin →chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop
Authorization →Bearer eyJ[...]
Connection →keep-alive
Content-Length →0
Date →Mon, 12 Jun 2017 13:19:54 GMT
Server →WildFly/10
Vary →Origin
X-Powered-By →Undertow/1

REST 服务

@POST
@Consumes(MediaType.APPLICATION_JSON)
public Response authenticateUser(CredentialsDTO credentialsDTO) {
    try {
        authService.login(credentialsDTO.getUsername(), credentialsDTO.getPassword());
    } catch (WrongCredentialsException e) {

        return Response.status(Status.FORBIDDEN).entity("WrongCredentialsException").build();
    } 

    // Issue token
    String token = issueToken(credentialsDTO.getUsername());

    // Return the token on the response
    return Response.ok().header(AUTHORIZATION, "Bearer " + token).build();
}

为什么我在 chrome 中看不到标题？

更新我还使用了一个 CORSFilter，它允许 Javascript 首先联系我的后端。这是我的 web.xml 中的配置方式

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>

    <init-param>
        <param-name>cors.allowGenericHttpRequests</param-name>
        <param-value>true</param-value>
    </init-param>

    <init-param>
        <param-name>cors.allowOrigin</param-name>
        <param-value>*</param-value>
    </init-param>

    <init-param>
        <param-name>cors.allowSubdomains</param-name>
        <param-value>false</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportedMethods</param-name>
        <param-value>GET, HEAD, POST, DELETE, OPTIONS</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportedHeaders</param-name>
        <param-value>*</param-value>
    </init-param>

    <init-param>
        <param-name>cors.supportsCredentials</param-name>
        <param-value>true</param-value>
    </init-param>

    <init-param>
        <param-name>cors.maxAge</param-name>
        <param-value>3600</param-value>
    </init-param>

</filter>

<filter-mapping>
    <!-- CORS Filter mapping -->
    <filter-name>CORS</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>

虽然我认为它被配置为允许一切，但我不确定这是否与我的问题有关。

Answer 1

默认情况下，CORS 响应仅将这 6 个 header 公开给脚本:

• 缓存控制
• 内容语言
• 内容类型
• 过期
• 最后修改时间
• 编译指示

要允许脚本访问服务器发送的其他 header ，服务器需要发送 Access-Control-Expose-Headers header 。

The Access-Control-Expose-Headers response header indicates which headers can be exposed to scripts as part of the response by listing their names.

例如:Access-Control-Expose-Headers: Authorization, X-Foobar

您可以调整您的 web.xml 文件，以允许从生成 XHR 的脚本访问 Authorization header :

<init-param>
  <param-name>cors.exposedHeaders</param-name>
  <par‌​am-value>Authorizati‌​on</param-value>
<ini‌​t-param>