Web 客户端无法访问响应的授权标头答案

【问题标题】：web client can't access authorization header on responseWeb 客户端无法访问响应的授权标头
【发布时间】：2019-06-14 13:53:15
【问题描述】：

我正在对我的服务器进行 CORS GET 调用，但我的 Web 客户端在响应中看不到授权标头。

我正在使用 axios 库进行其余调用：

getReturn: function() {
  axios
    .get(
      "http://<cors url>/test",
      {
        params: {
          captcha: this.token,
          shipperEmail: this.shipperEmail,
          salesOrder: this.ereturn.invoice,
          consigneeEmail: this.ereturn.consignee.email
        },
        headers: {
          Authorization: "Bearer " + this.token
        }
      }
    )
    .then(response => {
      console.log(response);
      this.token = response.headers.authorization.split(" ")[1];
    })
    .catch(error => alert("something went wrong " + error));
},

当我检查 chrome 开发者工具时，OPTIONS 和 GET 请求都成功并且 GET 响应具有我需要的 Authorization 标头：

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: http://<cors url>
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: Access-Control-Allow-Origin,Access-Control-Allow-Credentials
Vary: Origin
Authorization: Bearer eyJhbGciOiJIUzI1NiJ9.eyJpc3N1ZXJJZCI6Ii0xIiwiY291bnRyeSI6ImZha2UgY291bnRyeSIsInJvbGUiOiJTVEFGRiIsImFkZHJlc3MiOiJmYWtlIGFkZHJlc3MiLCJjaXR5IjoiZmFrZSBjaXR5IiwiaXNzIjoiZmFrZUNvbnNpZ25lZUBlbWFpbC5jb20iLCJza3VNYW5hZ2VtZW50IjpmYWxzZSwic3RhdGUiOiJmYWtlIHN0YXRlIiwidHlwZSI6IkNPTlNJR05FRSIsInBvcnRDb2RlIjoiZmFrZSBwb3J0IGNvZGUiLCJleHAiOjE1NjA0NzIyMTJ9.Z6HzgjPgg3sxJfxU9VCNIaTW6TDLnhNyrBDZqvAfhbM
Content-Type: application/json
Content-Length: 2163
Date: Thu, 13 Jun 2019 16:30:12 GMT

客户端执行此操作失败：

response.headers.authorization.split(" ")[1];

带有错误消息something went wrong TypeError: Cannot read property 'split' of undefined

问题：为什么我在客户端运行的代码无法访问开发者工具显示的 Authorization 标头标志？

谢谢

【问题讨论】：

标签： cors http-headers

【解决方案1】：

我的问题是 Access-Control-Expose-Headers 在网络服务器上配置错误：

Access-Control-Expose-Headers 包含 Web 客户端可访问的标头标志列表。所以要解决这个问题，我只需要改变：

Access-Control-Expose-Headers: Access-Control-Allow-Origin,Access-Control-Allow-Credentials

到

Access-Control-Expose-Headers: Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Authorization

在我的 tomcat 配置中

【讨论】：