从 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"));
    }
});

我希望通过cookies-js获取并保存cookie，但根据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”在响应头中可见。 我还使用curl验证了“Set-Cookie”头的存在。

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

如需更多详细信息，请告知。

- ton

Answer 1

你无法在JS中获取cookie数据。API不允许这样做。

我该如何在前端应用程序中保存cookie？

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

作为开发人员，您可以使用“开发人员工具”检查cookie的值。

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

- Quentin

---

我该如何访问它？当记录时，document.cookie返回未定义或空字符串。 - ton

你根本不需要使用JS来访问它。浏览器会自动透明地存储它。服务器会像平常一样访问它。 - Quentin

那么它将始终包含在我所有未来的AJAX请求中？ - ton

只有当 HttpOnly 为真时才成立：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie - M3D

@M3D - HttpOnly 确定是否可以通过 the document.cookie interface 访问 JS 运行的 HTML 文档的 cookie。它对于响应 Ajax 请求设置的 cookie 没有影响，这些 cookie 总是不可用的，并且对于浏览器存储 cookie 的方式也没有影响（这就是问题所在）。 - Quentin

Answer 2

出于安全原因，浏览器无法访问第三方cookie，例如从ajax请求中接收的cookie，但是它会自动为您处理这些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，即使它们无法从头文件或document.cookie中读取。

请参见我的回答：如何从AJAX响应中获取cookie？

- MrE