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" 时,浏览器将不会在请求中包括凭证信息。

至此,问题解决。

相关推荐
weixin_445476683 分钟前
一天一个设计模式——开闭原则
服务器·设计模式·开闭原则
jerryinwuhan24 分钟前
LINUX复习资料(二)
linux·运维·服务器
郝学胜-神的一滴24 分钟前
Linux下的阻塞与非阻塞模式详解
linux·服务器·开发语言·c++·程序人生·软件工程
星空下的曙光2 小时前
Node.js events模块所有 API 详解 + 常用 API + 使用场景
node.js
无责任此方_修行中2 小时前
我的两次 Vibe Coding 经历,一次天堂,一次地狱
后端·node.js·vibecoding
一枚正在学习的小白2 小时前
PG数据文件位置迁移
linux·运维·服务器·数据库
我科绝伦(Huanhuan Zhou)3 小时前
Systemctl 与 Systemd 全面指南:Linux 系统服务管理详解
linux·服务器·网络
gplitems1234 小时前
Petslist – Pet listing WordPress Theme Free Download
linux·服务器·前端
1白天的黑夜14 小时前
Linux (5)| 入门进阶:Linux 权限管理的基础规则与实践
linux·运维·服务器·centos
济南java开发,求内推4 小时前
mongodb一个服务器部署多个节点
服务器·数据库·mongodb