在 angularjs 中访问自定义 http 响应 headers

Question

我正在尝试访问 header 'error-detail'，正如您在浏览器网络检查器（上面的 link）中看到的那样，返回了 header。 Server-wise 我还将自定义 header 添加到 'Access-Control-Expose-Headers' 以允许 cross-domain 请求，因为这被建议作为对其他问题的修复。

下面是对服务器的请求以及 success/error 回调。

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'));
};

当我尝试访问响应 header 时，如下所示：

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

这只会输出： content-type: "application/json" error-detail: 空

error-detail header 未映射到响应 object 是否有原因？

Answer 1

我认为您的方向是正确的。要访问自定义 header，您的服务器需要设置这个特殊的 Access-Control-Expose-Headers header，否则您的浏览器将只允许访问 6 个预定义的 header 值，如Mozilla docs.

在您的屏幕截图中，响应中没有这样的 header。您应该查看此 cors header 的后端，以使其也出现在响应中。

Answer 2

这是一个 CORS Issue. Because this is a cross-origin request, the browser is hiding most ot the headers. The server needs to include a Access-Control-Expose-Headers header 的回复。

Access-Control-Expose-Headers¹ 响应 header 表明哪些 header 可以通过列出其名称作为响应的一部分公开。

默认情况下，仅公开 6 个简单响应 header：

Cache-Control
Content-Language
Content-Type
过期
Last-Modified
杂注

如果您希望客户端能够访问其他 header，您必须使用 Access-Control-Expose-Headers header.

列出它们

有关详细信息，请参阅 MDN HTTP Header -- Access-Control-Expose-Headers

在 angularjs 中访问自定义 http 响应 headers

Accessing custom http response headers in angularjs

javascript

rest

angularjs

angular-http