自定义 cookie 发送到浏览器但未存储答案

【问题标题】：Custom cookie sent to browser but not stored自定义 cookie 发送到浏览器但未存储
【发布时间】：2020-02-16 17:55:44
【问题描述】：

我已经尝试了多种配置并阅读了有关此问题的多个帖子，但我仍然迷路。

我的 api 服务器发送的自定义 cookie 被浏览器接收但从未存储。我不知道为什么。

我开发了一个部署在heroku上的node/express api服务器。

我的前端使用 Vuejs 并部署在 firebase 上。

这是与我的 cookie 配置相关的代码：

服务器端

科斯

app.use(
    cors({
        origin: 'https://my-app.firebaseapp.com',
        credentials: true,
    exposedHeaders: ['customCookie']
    })
);

设置cookie

const cookieOptions = {
    httpOnly: true,
    sameSite: 'None',
    expires: expirationDate,
    secure: true,
    path: '/',
    domain: 'https://my-app.firebaseapp.com',
};

res.cookie('customCookie', 'value', cookieOptions)

客户端

Axios

axios.defaults.baseURL = 'https://my-app.herokuapp.com';
axios.defaults.withCredentials = true;

请求标头

POST /auth/sign-in HTTP/1.1
Host: my-app.herokuapp.com
Connection: keep-alive
Content-Length: 55
Pragma: no-cache
Cache-Control: no-cache
Origin: https://my-app.firebaseapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3921.0 Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Referer: https://my-app.firebaseapp.com/auth/sign-in
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7,nl;q=0.6,la;q=0.5

响应标题

HTTP/1.1 200 OK
Server: Cowboy
Connection: keep-alive
X-Dns-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-Xss-Protection: 1; mode=block
Access-Control-Allow-Origin: https://my-app.firebaseapp.com
Vary: Origin, Accept-Encoding
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: customCookie
Set-Cookie: customCookie=value; Domain=https://my-app.firebaseapp.com; Path=/; Expires=Sun, 17 Nov 2019 11:54:30 GMT; HttpOnly; Secure; SameSite=None
Content-Type: application/json; charset=utf-8
Content-Length: 200
Etag: W/"c8-qlzfwyZ+uJQMQIeJOQnFSQYPR6o"
Date: Sun, 20 Oct 2019 11:54:30 GMT
Via: 1.1 vegur

所以，cookie 在这里正确发送和接收：

Set-Cookie: customCookie=value; Domain=https://my-app.firebaseapp.com; Path=/; Expires=Sun, 17 Nov 2019 11:54:30 GMT; HttpOnly; Secure; SameSite=None

但是当我检查选项卡时：Google Dev Tools >> Application >> Cookies >> my-app...

=> 没有存储 cookie，因此不会在后续请求中发送 cookie...

有什么想法/建议吗？

非常感谢您的帮助，

罗曼

【问题讨论】：

标签： node.js api express vue.js cookies

【解决方案1】：

我认为你需要处理Access-Control。

您可以通过添加此代码来做到这一点

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    next();
});

另外，我假设你使用 Chrome 作为浏览器，你可以在没有安全性的情况下运行 chrome 通过这样做，然后检查您的 cookie 是否已存储

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome 开发会话" --args --disable-web-security

【讨论】：

谢谢，但是您建议的解决方案已经处理了 bar cors，所以不是这样...但是我发现了问题（请参阅我自己的答案）。再次感谢:)

【解决方案2】：

我想我明白了。

在 Chrome（可能还有其他导航器）中，cookie 似乎只存储在域地址中，在我的情况下，域地址应该是服务器应用程序 (my-app.herokuapp.com)，而不是客户端应用程序(my-app.firebaseapp.com)。

换句话说，我认为我的 cookie 将存储在我的客户端应用程序地址中并且可见，但它们实际上存储在我的域地址中并且可见。

现在一切正常...

【讨论】：