Web 客户端在响应时无法访问授权标头

Question

我正在对我的服务器进行 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 开发人员工具时，选项 和 GET 请求都成功，并且 GET 响应具有我需要的授权标头：

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

问：为什么在客户端中运行的代码无法访问开发人员工具显示的授权标头标志？

谢谢

Answer 1

我的问题是 Web 服务器上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

在我的雄猫配置中