在AngularJS中访问自定义HTTP响应头

Question

我在尝试访问浏览器网络检查器中（上面的链接）可以看到 'error-detail' 首部已返回。在服务器端，我还将自定义首部添加到 'Access-Control-Expose-Headers' 中，以允许跨域请求，因为其他问题建议采用此方法进行修复。

下面是向服务器发送请求以及成功/错误回调的代码：

this.signon = function (request, onComplete, onError) {
    console.log("Calling server with 'login' request...");

    return $http.post("http://localhost:8080/markit-war/services/rest/UserService/login/", request)
        .then(onComplete, onError);
};

var onLookupComplete = function(response) {
    if (response.data.username)
    {
        //If user is returned, redirect to the dashboard.
        $location.path('/dashboard');
    }

    $scope.username = response.data.username;
};

var onError = function(response) {
    $scope.error = "Ooops, something went wrong..";
    console.log('error-detail: ' + response.headers('error-detail'));
};

当我尝试访问如下所示的响应头时：

    console.log(response.headers());
    console.log('error-detail: ' + response.headers('error-detail'));

这只输出：

content-type："application/json"
error-detail：null

为什么error-detail头部没有被映射到响应对象中呢？

- Ibrahim Farah

---

你能执行 response.headers().error-detail 吗？ - user2085143

@user2085143 不是吧，那肯定不是合法的语法，对吧？ - Ibrahim Farah

可能不是，但不确定response.headers()实际返回什么。你看过这个吗https://dev59.com/EHVC5IYBdhLWcg3wqzHV - user2085143

你能把你用来发送请求的Angular代码和回调函数贴出来吗？ - Larry Turtis

@LarryTurtis，我已经根据您的要求编辑了我的问题，包括请求和回调。谢谢。 - Ibrahim Farah

Answer 1

我认为你走在正确的道路上。要访问自定义标头，你的服务器需要设置特殊的Access-Control-Expose-Headers标头，否则你的浏览器只允许访问6个预定义的标头值，如Mozilla文档所列出的。

从你的截图来看，响应中没有这样的标头。你应该查看后端以确保此cors标头也出现在响应中。

- Andreas Jägle

Answer 2

这是一个CORS问题。由于这是跨源请求，浏览器隐藏了大部分头信息。服务器需要在其响应中包含Access-Control-Expose-Headers头。 Access-Control-Expose-Headers¹响应头指示可以通过列出其名称公开作为响应的一部分的标头。

默认情况下，只公开了6个简单的响应头：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

如果您希望客户端能够访问其他标头，则必须使用Access-Control-Expose-Headers头列出它们。

更多信息请参见MDN HTTP Header -- Access-Control-Expose-Headers。

- georgeawg