javascript - CORS 请求后,AJAX 无法在浏览器上设置 Cookie。 Set-Cookie header 仅存在于 FireFox 中,而不存在于 Chrome 中

标签 javascript jquery ajax cookies cross-domain

我正在使用 JQuery 向 NodeJS 服务器发送 AJAX 请求,该服务器应该毫无问题地将 cookie 设置回客户端,但事实并非如此。我可以在响应中看到 Set-Cookie header ,但浏览 document.cookie 字符串并不包含我的 cookie!如果有人能看一下这段代码,我将不胜感激。

请求代码:

$.ajax({
   type: "POST",
   url: "https://my-site/mailcamp",
   contentType: "application/json",
   dataType: "json",
   processData:false,
   data: JSON.stringify(reqBody),
   success: function (data) {
      console.log(data);   
   },
   xhrFields: { withCredentials: true },
   crossDomain: true,
})

服务器响应:

app.use('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "https://www.texashunterproducts.com");
  res.header("Access-Control-Allow-Headers", "Origin, x-access-token, x-user-pathway, x-mongo-key, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
  res.header("Access-Control-Allow-Credentials", true);
  next();
});

router.route('/mailcamp')
    .post(async (req, res, next) => {
        try { 
            res.setHeader('Set-Cookie', [`texaspopup=true`]);
            res.cookie("texcookienowpopupnow", "trueasheck")
            res.send("Send me dem cookiez");
        } catch(err) { next(err) }
    })

我只是没有在 document.cookie 中得到这个。我有一些奇怪的不一致之处:

我可以在 FireFox Network 选项卡中清楚地看到 Set-Cookie 响应 header :

enter image description here enter image description here

然而,它在 Chrome 中完全缺失!

enter image description here

我在解析 document.cookie 时根本找不到 cookie。我已复制并粘贴 document.cookie 的内容,但无法使用 ctrl+f 找到我的键/值对。为什么?这里发生了什么?它不应该被隐藏,因为我没有在 cookie 上添加 Httponly 标记,并且我将其直接发送到我正在查询的域。

最佳答案

这是一个愚蠢的问题。这是第三方 cookie。虽然它是由外部域设置的,但接收者无法通过 doc.cookies 读取它,只有在浏览到发送 cookie 的域时才能读取它。我最终使用此源中的代码在客户端本地设置 cookie,并发送后续请求以完成服务器操作:

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework

关于javascript - CORS 请求后,AJAX 无法在浏览器上设置 Cookie。 Set-Cookie header 仅存在于 FireFox 中,而不存在于 Chrome 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53787814/

相关文章:

javascript - 无法在 onclick 事件上删除随机数组元素

javascript - Angular 绑定(bind)到服务值不更新

javascript - jQuery 无法在 Express JS 中工作 - NodeJS

javascript - 每 n 秒刷新部分结果为 "Stack Level Too Deep"

javascript - 在 asp.net mvc 中使用 RTL 输入的货币/小数输入

javascript - 更改 React 中粘性组件的文本

javascript - 灯箱正在下载图片而不是显示图片

jquery - Ajax跨源请求被阻止: The Same Origin Policy disallows reading the remote resource

javascript - 元素输入上的 JQuery 自定义事件处理程序

javascript - 通过 Ajax 调用将 Twitter 关注按钮添加到页面