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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29895569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:16:28  来源:igfitidea点击:

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

javascriptajaxcookieshttp-headershttpresponse

提问by ton

I have a simple jQuery AJAX POST code:

我有一个简单的 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"));
    }
});

and I wish to get the cookie and save it using cookies-js.

我希望获取 cookie 并使用cookies-js保存它。

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

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

  1. 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.
  1. 返回所有响应标头,不包括与 Set-Cookie 或 Set-Cookie2 不区分大小写匹配的标头,作为单个字符串,每个标头行由 U+000D CR U+000A LF 对分隔,不包括状态行,并且每个标头名称和标头值由 U+003A COLON U+0020 SPACE 对分隔。

Using the Network tool in Chrome, "Set-Cookie" is visible in the Response headers. I also verified that the "Set-Cookie" header appears using curl.

使用 Chrome 中的网络工具,“Set-Cookie”在响应标头中可见。我还验证了“Set-Cookie”标头是否使用curl.

What do I have to do to save the cookie in my front end app? Also, my app is running on httpsonly.

我该怎么做才能将 cookie 保存在我的前端应用程序中?此外,我的应用程序仅在https上运行。

I'd gladly provide more details upon request.

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

回答by Quentin

You can't get the cookie data in your JS. The API won't allow you.

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

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

我该怎么做才能将 cookie 保存在我的前端应用程序中?

Just set the Set-Cookieheader in the response from the server side code. The browser should save it automatically.

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

As a developer, you may be able to inspect the value of the cookies using "Developer Tools".

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

And the same cookie will be sent in subsequent requests to the same domain, until the cookie expires.

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

回答by MrE

The browsercannot give access to 3rd party cookies like those received from ajax requests for security reasons, howeverit takes care of those automatically for you!

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

For this to work you need to:

为此,您需要:

1) login with the ajax request from which you expect cookies to be returned:

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) Connect with xhrFields: { withCredentials: true }in the next ajax request(s) to use the credentials saved by the browser

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

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

The browser takes care of these cookies for you even though they are not readable from the headersnor the document.cookie

浏览器需要照顾这些cookie的你,即使他们无法从读取headers,也不是document.cookie

see my answer here: How to get a cookie from an AJAX response?

在此处查看我的答案:如何从 AJAX 响应中获取 cookie?