$ http响应Set-Cookie不可访问 [英] $http response Set-Cookie not accessible

问题描述

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

服务器在响应中发送一个cookie，但是完全被angular.js忽略了（甚至不能打印出Set-Cookie值）。

我试过阅读

XHR由它的规范，不支持 SET-COOKIE ，因此它与angular.js无关。

http://www.w3.org/TR/XMLHttpRequest/ ＃the-getallresponseheaders％28％29-method

4.7.4 getAllResponseHeaders（）方法

返回响应中的所有头，除了字段名为Set-Cookie或Set-Cookie2 的头之外。

< blockquote>

---

而只需使用 $ 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'）。然后（function（response）{
 $ timeout（function（）{
 console.log 
}）; 
}）
} 
}）
  

我使用 $ timeout ，因为 $ cookies 只能在浏览器的Cookie之后与浏览器的Cookie同步。

I'm currently writing an angularjs frontend to my backend, and I'm running into a somewhat common issue:

Server sends a cookie back in a response, but is completely ignored by angular.js (can't even print out the 'Set-Cookie' value).

I've tried reading

Set-Cookie in HTTP header is ignored with AngularJS

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

but unfortunately I've tried all the solutions there and just doesn't seem to work.

Request sent

Response received

I'm using angular.js (v1.2.10), and this is what I used to make the request

$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 is set on the client side before making the request.

Access-Control-Allow-Credentials=true is set on the server side before returning the response.

You can clearly see Set-Cookie is in the response headers from Chrome Developer Tools, but printout is just

Only Set-Cookie in the response header is not being printed out. I'm wondering why does this occur? Is there a way for me to make sure withCredentials=true is indeed set (I didn't see it in the request header)?

Any help is appreciated!

解决方案

I looked inside $httpBackend source code:

xhr.onreadystatechange = function() {

  // some code

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

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

      // some code

It uses XMLHttpRequest#getAllResponseHeaders to get the response headers.

After a little search I found this question: xmlHttp.getResponseHeader + Not working for CORS

Which made me realize that XHR by it's specification, doesn't support SET-COOKIE, so it have nothing to do with angular.js in particular.

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.

---

Instead just use $cookies:

It's a different module so you must add it to your scripts

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

And add it to the module dependencies:

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

Then just use it like so:

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

  $scope.request = function(){

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

I use $timeout because $cookies only synchronize with browser's cookies after a digest.

这篇关于$ http响应Set-Cookie不可访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！