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"时，浏览器将不会在请求中包括凭证信息。
至此，问题解决。