在CORS请求之后,AJAX无法在浏览器上设置Cookies。 Set-Cookie标头仅在FireFox中存在,而在Chrome中不存在

时间:2018-12-14 22:42:23

标签: javascript jquery ajax cookies cors

我正在使用JQuery将AJAX请求发送到NodeJS服务器,该服务器应该将cookie设置回客户端没有问题,但是不是。我可以在响应中看到Set-Cookie标头,但是浏览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的“网络”标签中,我可以清楚地看到Set-Cookie响应标题:

enter image description here enter image description here

但是,它在Chrome中完全消失了!

enter image description here

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

1 个答案:

答案 0 :(得分:0)

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

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