javascript - $http 响应 Set-Cookie 不可访问

Question

我目前正在为我的后端编写一个 angularjs 前端，我遇到了一个比较常见的问题:

服务器在响应中发回一个 cookie，但被 angular.js 完全忽略(甚至无法打印出“Set-Cookie”值)。

我试过阅读

Set-Cookie in HTTP header is ignored with AngularJS

Angularjs $http does not seem to understand "Set-Cookie" in the response

但不幸的是，我已经尝试了那里的所有解决方案，但似乎并不奏效。

请求已发送

收到回复

我正在使用 angular.js (v1.2.10)，这是我用来发出请求的

$http.post('/services/api/emailLogin',
           sanitizeCredentials(credentials), 
           {
              withCredentials: true
           }).success(function(data, status, header) {
                console.log(header('Server'));
                console.log(header('Set-Cookie'));
                console.log(header('Access-Control-Allow-Headers'));
                console.log(header('Access-Control-Allow-Methods'));
                console.log(header);
            }).then(
                function(response) {
                    console.log(response);
                    return response.data;
                });

withCredentials=true 在发出请求之前在客户端设置。

Access-Control-Allow-Credentials=true 在返回响应之前在服务器端设置。

您可以清楚地看到 Set-Cookie 位于 Chrome 开发者工具的响应 header 中，但打印输出只是

只有响应 header 中的 Set-Cookie 没有被打印出来。我想知道为什么会这样？有什么方法可以确保确实设置了 withCredentials=true(我没有在请求 header 中看到它)？

感谢任何帮助!

Answer 1

我查看了$httpBackend源代码:

xhr.onreadystatechange = function() {

  // some code

  if (xhr && xhr.readyState == 4) {
    var responseHeaders = null,
        response = null;

    if(status !== ABORTED) {
      responseHeaders = xhr.getAllResponseHeaders();

      // some code

它使用 XMLHttpRequest#getAllResponseHeaders 获取响应 header 。

经过一番搜索，我发现了这个问题:xmlHttp.getResponseHeader + Not working for CORS

这让我意识到 XHR 的规范不支持 SET-COOKIE，所以它与 angular.js 没有任何关系。

http://www.w3.org/TR/XMLHttpRequest/#the-getallresponseheaders%28%29-method

4.7.4 The getAllResponseHeaders() method

Returns all headers from the response, with the exception of those whose field name is Set-Cookie or Set-Cookie2.

---

而是使用$cookies :

这是一个不同的模块，因此您必须将它添加到您的脚本中

 <script src="angular.js"></script>
 <script src="angular-cookies.js"></script>

并将其添加到模块依赖项中:

 var app = angular.module('app',['ngCookies']);

然后像这样使用它:

app.controller('ctrl',  function($scope, $http , $cookies, $timeout){

  $scope.request = function(){

    $http.get('/api').then(function(response){
      $timeout(function(){
        console.log($cookies.session)
      });         
    })
  }
})

我使用 $timeout 因为 $cookies 仅在摘要后与浏览器的 cookie 同步。