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

Question

我有一个简单的jQueryAJAXPOST代码：

$.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：

Return all response headers, excluding headers that are a case-insensitive match for Set-Cookie or Set-Cookie2, as a single string, with each header line separated by a U+000D CR U+000A LF pair, excluding the status line, and with each header name and header value separated by a U+003A COLON U+0020 SPACE pair.

使用 Chrome 中的网络工具，"Set-Cookie" 在响应 header 中可见。我还验证了 "Set-Cookie" header 使用 curl.

出现

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

我很乐意根据要求提供更多详细信息。

Answer 1

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

What do I have to do to save the cookie in my front end app?

只需在服务器端代码的响应中设置Set-Cookie header。浏览器应该会自动保存它。

作为开发人员，您可以使用 "Developer Tools" 检查 cookie 的值。

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

Answer 2

出于安全原因，浏览器 无法访问来自 ajax 请求的第三方 cookie，但是它自动为您处理这些！

为此，您需要：

1) 使用您希望返回 cookie 的 ajax 请求登录：

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

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

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

浏览器会为您处理这些 cookie，即使它们无法从 headers 或 document.cookie

读取

在这里查看我的回答：How to get a cookie from an AJAX response?

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

Get and store cookie (from Set-Cookie) from an AJAX POST response

javascript

cookies

ajax

httpresponse

http-headers