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

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

javascript 复制代码
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",
        })

后端解决跨域部分代码:

javascript 复制代码
//解决跨域问题
const cors = require("cors");
app.use(cors());

后端设置cookie部分代码:

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

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

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

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

解决办法:

先上最终的解决办法:

跨域配置设置为:

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

axios请求修改为:

javascript 复制代码
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失效时间代码为:

javascript 复制代码
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为:

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

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

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

javascript 复制代码
            withCredentials: "include",

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

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

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

至此,问题解决。

相关推荐
EricWang13587 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
算法与编程之美34 分钟前
文件的写入与读取
linux·运维·服务器
JaneJiazhao2 小时前
HTTPSOK:SSL/TLS证书自动续期工具
服务器·网络协议·ssl
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
~甲壳虫3 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫3 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
萨格拉斯救世主3 小时前
戴尔R930服务器增加 Intel X710-DA2双万兆光口含模块
运维·服务器
无所谓จุ๊บ3 小时前
树莓派开发相关知识十 -小试服务器
服务器·网络·树莓派
Jtti3 小时前
Windows系统服务器怎么设置远程连接?详细步骤
运维·服务器·windows
yeyuningzi3 小时前
Debian 12环境里部署nginx步骤记录
linux·运维·服务器