node.js中express框架cookie-parser包设置cookie的问题

后端使用node.js express cookie-parser技术栈设置cookie的时候出现了无法成功设置的问题

前端发送axios请求部分代码：

axios({
            method: "post",
            data: {
                content: remark,
                relatedArticles: relatedArticleId,
                userId: userId,
                userEmail: userEmail,
                topRemarkId: topRemarkId,
                priorUserId: priorUserId,
                priorRemarkId: priorRemarkId,
                deep: deep,
            },
            url: "http://127.0.0.1:3007/api/saveremark",
        })

后端解决跨域部分代码：

//解决跨域问题
const cors = require("cors");
app.use(cors());

后端设置cookie部分代码：

res.cookie("userId", "demo", {
                    expires: new Date(Date.now()),
                    maxAge: 60 * 60 * 24,
                    httpOnly: true,
                });

此时发送请求后前端收到的响应头：

Set-Cookie:
userId=demo; Max-Age=3; Path=/; Expires=Thu, 19 Oct 2023 16:05:11 GMT

但查看浏览器application cookie栏中仍没有设置的cookie

解决办法：

先上最终的解决办法：

跨域配置设置为：

//解决跨域问题
const cors = require("cors");
app.use(cors({ credentials: true, origin: true }));

axios请求修改为：

axios({
            withCredentials: "include",//加上这行代码
            method: "post",
            data: {
                content: remark,
                relatedArticles: relatedArticleId,
                userId: userId,
                userEmail: userEmail,
                topRemarkId: topRemarkId,
                priorUserId: priorUserId,
                priorRemarkId: priorRemarkId,
                deep: deep,
            },
            url: "http://127.0.0.1:3007/api/saveremark",
        })

解决思路：

发现响应头时间与我的电脑时间（实际时间）不一致，首先认为可能是后端代码中cookie失效时间设置错误

后端设置cookie失效时间代码为：

expires: new Date(Date.now())

使用当前的Date对象设置失效时间，经过打印输出Date.now()之后，发现比实际时间少了八个小时，查询资料得知通过此方法获取到的是UTC时间，具体可阅读http://t.csdnimg.cn/Ir4jR，但之后通过第三方包获取当前时间戳，从而获取当前事件对象，设置为expires值后再次尝试，仍然没有正确在浏览器设置cookie，查询资料得知，与此时间无关，浏览器中的过期时间也是服务器时间，具体可阅读HTML5学习之关于Cookie的expires过期时间无效分析 - 掘金

查询资料后发现是由于浏览器的同源策略问题，以下需知道几个概念：

同源

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

同源策略是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。 非同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

非同源受到的限制:

cookie不能读取

dom无法获得

ajax请求不能发送

跨站

两个域名不属于 同站（域名-主机名/IP相同，协议相同）。

跨域

两个域名不属于 同源（域名-主机名/IP相同，端口号相同，协议相同）。

所以为了应对浏览器的同源策略我们要解决跨域问题，所以配置cors为：

cors({ credentials: true, origin: true })

• credentials: true 表示在跨域请求中，允许携带跨域请求的凭证信息，例如cookie、HTTP认证等。如果你的应用程序需要在跨域请求中使用凭证信息，你需要将credentials设置为true。这样可以确保跨域请求可以携带和接收到凭证信息。

• origin: true 表示允许跨域请求的源（origin）可以是任意源。如果将origin设置为true，则表示允许来自任意源的跨域请求。这样可以解决跨域请求的问题，使得你的应用程序可以接受来自不同源的请求。

在前端发送axios请求时也要携带cookie信息，以便后端验证，axios配置需要加上：

            withCredentials: "include",

withCredentials 可以设置为以下两个值之一：

• "include"：表示请求应该携带凭证信息（如cookie）。当设置为 "include" 时，浏览器将在请求中包括凭证信息，以便服务器可以识别和验证用户身份。

• "omit"：表示请求不应该携带凭证信息。当设置为 "omit" 时，浏览器将不会在请求中包括凭证信息。

至此，问题解决。