从AJAX POST响应中获取并存储cookie(来自Set-Cookie)

Question

我有一个简单的jQuery AJAX POST代码:

$.ajax({
    type: "POST",
    url: AppConstants.URLs.PROXY,
    data: message,
    xhrFields: {
        withCredentials: true
    },
    success: function(data, status, xhr) {
        console.log("Cookie: " + xhr.getResponseHeader("Set-Cookie"));
    }
});

我希望得到cookie并使用cookies-js保存它.

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

3. 将所有响应头(不包括与Set-Cookie或Set-Cookie2不区分大小写的匹配项)作为单个字符串返回,每个标题行由U + 000D CR U + 000A LF对分隔,不包括状态行,并且每个标题名称和标题值由U + 003A COLON U + 0020 SPACE对分隔.

使用Chrome中的网络工具,"响应"标题中会显示"Set-Cookie".我还验证了使用"Set-Cookie"标题curl.

我需要做什么才能在我的前端应用程序中保存cookie？此外,我的应用程序仅在https上运行.

我很乐意根据要求提供更多细节.

Answer 1

您无法在JS中获取cookie数据.API不允许你.

我需要做什么才能在我的前端应用程序中保存cookie？

只需Set-Cookie在服务器端代码的响应中设置标头即可.浏览器应自动保存.

作为开发人员,您可以使用"开发人员工具"检查cookie的值.

并且相同的cookie将在后续请求中发送到同一域,直到cookie过期.

Answer 2

该浏览器不能给访问的第三方Cookie,像那些从出于安全原因,Ajax请求接受,但是它会自动为您需要的照顾!

为此,您需要:

1)使用ajax请求登录,您希望从中返回cookie:

$.ajax("https://example.com/v2/login", {
     method: 'POST',
     data: {login_id: user, password: password},
     crossDomain: true,
     success: login_success,
     error: login_error
  });

2)xhrFields: { withCredentials: true }在下一个ajax请求中连接以使用浏览器保存的凭据

$.ajax("https://example.com/v2/whatever", {
     method: 'GET',
     xhrFields: { withCredentials: true },
     crossDomain: true,
     success: whatever_success,
     error: whatever_error
  });

浏览器会为您处理这些cookie,即使它们不是可读的headers也不是可读的document.cookie

在这里看到我的答案:如何从AJAX响应中获取cookie？