$http 響應 Set-Cookie 不可訪問

Question

我目前正在為我的后端編寫一個 angularjs 前端，我遇到了一個常見的問題：

服務器在響應中發回 cookie，但被 angular.js 完全忽略（甚至無法打印出“Set-Cookie”值）。

我試過閱讀

AngularJS 忽略 HTTP 標頭中的 Set-Cookie<\/a>

Angularjs $http 似乎不理解響應中的“Set-Cookie”<\/a>

但不幸的是，我已經嘗試了那里的所有解決方案，但似乎不起作用。

已發送請求

收到回復

我正在使用 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;
                });

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來獲取響應頭。

經過一番搜索，我發現了這個問題： xmlHttp.getResponseHeader +不適用於CORS

這讓我意識到XHR的規格，不支持SET-COOKIE ，所以它與angular.js無關。

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

4.7.4 getAllResponseHeaders（）方法

返回響應中的所有標頭，但字段名稱為Set-Cookie或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同步。

Answer 2

你是否真的需要在Angular中讀取cookie，或者它是否足夠，如果它被設置並傳回瀏覽器的進一步請求？ 雖然我無法讓前者工作，但我能夠以非常相似的配置讓后者快速工作。 （特別是，我無法使用$cookies作為@Ilan推薦。它什么也沒有返回。）

首先，在Angular端配置$httpProvider默認發送withCredentials ：

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.withCredentials = true;
}]);

這就是你在Angular所要做的一切。 請注意，此時，如果您嘗試讀取$cookies它仍然無法看到cookie，但它會被保存並將在未來的AJAX調用中傳遞。

然后，在服務器上，您需要提供CORS下允許的特定域（或一組域）以及Access-Control-Allow-Credentials標頭。 我的后端是Flask in Python with Flask-Restful ，它看起來像這樣：

import Flask
from flask_restful import Api
app = Flask(__name__)
api = Api(app)
api.decorators = [cors.crossdomain(origin='http://localhost:8100', credentials=True)]

這就是全部。 現在，Angular（或者更確切地說，瀏覽器）設置cookie並將其與未來的請求完全透明地返回！

（同樣的觀點在這里： https ： //stackoverflow.com/a/19384207/2397068 。）

Answer 3

在Angular 1.3.14中它不再起作用。

我有同樣的問題。 我正在使用$ resource並聲明withCredentials：true。

 var fooRes = $resource('/address/exemple',
    {},
    {
        bar: {
            method: 'POST',
            withCredentials: true,
        }
    }
 );

 fooRes.bar({
     "stuff" : "lorem"
 }).$promise.then(function(){
     //callback
 })

或者您可以設置標題“Access-Control-Allow-Credentials”，“true”。

現在cookie將被保存，您可以使用$ cookie。

希望它會有所幫助。

Answer 4

您需要修改.htaccess文件以允許讀取標頭。

Header set Access-Control-Allow-Headers Content-Type

Answer 5

設置'access-control-expose-headers', '*'

節點 API 示例

router.get('/your-route', async (req, res) => {
    //..
    res.setHeader('access-control-expose-headers', '*' );
    //..
})