查看从 ajax XHR 请求设置的 Chrome devtools 中的 cookie答案

【问题标题】：See cookies in Chrome devtools set from an ajax XHR request查看从 ajax XHR 请求设置的 Chrome devtools 中的 cookie
【发布时间】：2017-09-30 13:02:15
【问题描述】：

我在 localhost:4000 上有一个页面，其中有一个由服务器设置的 cookie。该页面还包含一个脚本，该脚本在页面加载时成功向服务器发出 XHR 请求。这个 XHR 请求响应设置了第二个 cookie。我只能在应用程序（选项卡）> 存储（左侧菜单组）> Cookies > http://localhost:4000 下的 Chrome devtools 中看到非 XHR cookie。

我可以在“网络”选项卡中看到从服务器返回的 XHR cookie（如果第二次加载该页面，则会显示非 XHR 和 XHR cookie 都正确包含在 XHR 请求中：

Request Cookies
xhr_cookie  valueABC
from_homepage   value123
Response Cookies
xhr_cookie  valueABC

所以 XHR cookie 被保存在某个地方，但我在 Chrome 的开发工具中看不到它。

【问题讨论】：

你能看看developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/…第二段吗？
@MahdiRafatjah 感谢您的链接。 withCredentials 仅指 CORS（巧合的是，在上面显示的 XHR 请求中它也已设置为 true）。相反，我想知道在 Chrome 开发工具中哪里可以看到这个 XHR cookie 值。

标签： ajax cookies google-chrome-devtools

【解决方案1】：

不是 Chrome 的解决方案，但解决方法是使用 Firefox 并从 Web 开发人员窗格的齿轮中启用Storage“检查器”。 https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

【讨论】：

我希望你能在这里发布你的代码。因为我正在测试它，但跨域网站没有运气。
您只需要在服务器上设置一个返回的cookie，让脚本发送一个xhr，然后让服务器在该端点/请求上设置一个不同的cookie。 withCredentials 仅指 CORS。

【解决方案2】：

Same Origin 请求很好。

跨源请求有一些限制。

文件：1.php：

<?php
    setcookie("cookie_name_1", "cookie_value_1", time() + (86400 * 30), "/"); 
?>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://foo.ir/2.php', true);
    xhr.withCredentials = true;
    xhr.onreadystatechange = function() {
      if(this.readyState == xhr.DONE) {
       get_res();
      }
    }
    xhr.send(null);

    function get_res(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://foo.ir/2.php?is_set', true);
        xhr.withCredentials = true;
        xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status === 200) {
                   console.log(xhr.responseText);
                }
            }
        };
        xhr.send(null);
    }
</script>

文件：2.php

<?php
header('Access-Control-Allow-Origin: http://localhost');
header('Access-Control-Allow-Credentials: true');

if(isset($_GET["is_set"])){
    if(isset($_COOKIE["cookie_name_2"]))
        echo "cookies are set:".$_COOKIE["cookie_name_2"];
    else
        echo "cookies not set";
}else
    setcookie("cookie_name_2", "cookie_value_2", time() + (86400 * 30), "/");
?>

跨域cookies工作：你需要允许第三方cookies被设置在浏览器设置
我找不到第三方 cookie 的存储位置。
Chrome 不会显示 cookie，也不会影响真实网站。
Firefox 和 Edge 将 cookie 保存在第三方网站存储中，因此它将影响真正的第三方网站。

更多信息请访问Here

根据 XMLHttpRequest Level 1 和 XMLHttpRequest Level 2，此特定响应标头属于“禁止”响应可以使用 getResponseHeader() 获取的标头，因此唯一的这可以工作的原因基本上是一个“顽皮”的浏览器

【讨论】：

“我找不到第三方 cookie 的存储位置。”这是我试图在 Chrome 中找到答案的问题，但感谢您的帖子。我现在将使用 Firefox。对于所提出的问题，SameOrigin 不能正常工作。 CrossOrigin 不是问题的一部分，但也很有趣。为此，您需要将 xhrHeader 都设置为 withCredentials true，因为 withCredentials 仅是 CORS，如果使用 jquery，您还需要将 crossDomain 选项设置为 true。

【解决方案3】：

在 Chrome 中，禁用“站点隔离”：

转到 'chrome://flags/#site-isolation-trial-opt-out
将Disable site isolation 设置为Disabled
重新启动

【讨论】：