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

至此,问题解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116700.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在Puppeteer中设置User-Agent来绕过京东的反爬虫机制?

概述 京东作为中国最大的电商平台,为了保护其网站数据的安全性,采取了一系列的反爬虫机制。然而,作为开发者,我们可能需要使用爬虫工具来获取京东的数据。 正文 Puppeteer 是一个由 Google 开发的 Node.js 库,它提供…

JAVA 同城服务预约家政小程序开发的优势和运营

随着社会节奏的加快,人们对家庭清洁和维护的需求日益增长。为了满足这一需求,JAVA同城服务预约家政小程序应运而生。本文将详细介绍该小程序开发的优势及运营策略,帮助读者更好地了解其价值和潜力。 一、开发优势 方便快捷:用户…

RHEL 软件包管理 rpm yum 源码编译

rpm安装: rpm -ivh xxx.rpm rpm查询:rpm -q zsh rpm -qa |grep zsh rpm -ql zsh |more #查看一个软件包安装后产生的目录及文件 rpm -qpi /mnt/Packages/lrzsz-0.12.20-36.el7.x86_64.rpm #列出rpm包的详细信息(还未安装的rpm包) rpm -qi zsh…

Spring Security—OAuth2 客户端认证和授权

一、认证—JWT Bearer 关于 JWT Bearer 客户端认证的进一步详情,请参考OAuth 2.0客户端认证和授权许可的 JSON Web Token (JWT)简介。 JWT Bearer 客户端认证的默认实现是 NimbusJwtClientAuthenticationParametersConverter,它是一个 Converter&#…

VMware虚拟机中ubuntu网络连接不上

VMware虚拟机中ubuntu中网络连接不上 解决方案其他虚拟机网络 解决方案 1.选择VMware中编辑-虚拟网络编辑器-更改: 设置为你喜欢的模式,这里为NET模式 2.选中ubuntu虚拟机(关机后的虚拟机),点击:编辑虚拟机…

GoLong的学习之路(八)语法之Map

文章目录 Map初始化方式判断某个键是否存在map的遍历对value值遍历。对key值遍历 使用delete()函数删除键值对按照指定顺序遍历map元素为map的切片值为切片类型的map 做个题吧 Map 哈希表是一种巧妙并且实用的数据结构。它是一个无序的key/value对的集合,其中所有的…

【十四】记一次MySQL宕机恢复过程,MySQL INNODB 损坏恢复

记一次MySQL宕机恢复过程 简介:一个业务数据库疏于运维管理,突然在今天崩溃宕机了,真是让人抓狂,上面也不知道积累了多久的数据,平时也没有定期做好备份,这下岂不是瞎了啊,经过不断的收集信息和…

什么是网络API以及用例

什么是API? API(application programming interface,应用程序编程接口)可使不同的应用程序通过一套机制和协议相互通信。同样,网络 API 可实现网络与应用程序、网络浏览器和数据库之间的通信。 使用表征状态传输&…

LeetCode977——有序数组的平方

LeetCode977——有序数组的平方 给你一个按 非递减顺序 排序的整数数组 nums,返回 每个数字的平方 组成的新数组,要求新数组也按 非递减顺序 排序。 输入:nums [-4,-1,0,3,10] 输出:[0,1,9,16,100] 解释:平方后&…

面试算法36:后缀表达式

题目 后缀表达式是一种算术表达式,它的操作符在操作数的后面。输入一个用字符串数组表示的后缀表达式,请输出该后缀表达式的计算结果。假设输入的一定是有效的后缀表达式。例如,后缀表达式["2", "1", "3", &q…

javaScript 使用indexOf 撸一下模糊查询

说明&#xff1a;把代码直接粘到HTML文件用浏览器打开即可体验 body的数据 <input class"keyWord" type"text" placeholder"查询关键字"><button class"searchBtn">查询</button><div><ul class"res…

【Spring Boot】Spring Boot集成RabbitMQ

一、发送和接收消息 Spring Boot提供了`spring-boot-starter-amqp`组件,只需要简单地配置即可与Spring Boot无缝集成。下面通过示例演示集成RabbitMQ实现消息的接收和发送。 步骤01 配置pom包。 创建Spring Boot项目并在pom.xml文件中添加spring-bootstarter-amqp等相关组件…

跟着NatureMetabolism学作图:R语言ggplot2转录组差异表达火山图

论文 Independent phenotypic plasticity axes define distinct obesity sub-types https://www.nature.com/articles/s42255-022-00629-2#Sec15 s42255-022-00629-2.pdf 论文中没有公开代码&#xff0c;但是所有作图数据都公开了&#xff0c;我们可以试着用论文中提供的数据…

用长tree方式做等长线

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 相关文章链接: 用set_data_check的方式做等长线 前面讲过了如何用set_data_check做等长线,这里再讲一下如何用cts的方式做。 1)写一个sdc,把等长线的起点设置成clock source,用于创建create_…

项目结束需要经历的5个关键步骤

项目结束是项目管理不可或缺的一部分。这是项目的最后阶段&#xff0c;根据关键绩效指标和范围对交付成果进行测试&#xff0c;收尾&#xff0c;总结经验教训&#xff0c;完成交接&#xff0c;并签署项目。 项目结束与启动会议和一样重要。管理人员应为此留出时间&#xff0c;…

前端CodeReivew实践 | 京东云技术团队

把Code Review变成一种开发文化而不仅仅是一种制度 把Code Review 作为开发流程的必选项后&#xff0c;不代表Code Review这件事就可以执行的很好&#xff0c;因为Code Review 的执行&#xff0c;很大部分程度上依赖于审查者的认真审查&#xff0c;以及被审查者的积极配合&…

求解仿射变换矩阵

仿射变换是图形学中经常用到的方法&#xff0c;通常但是仿射变换的系数是未知的&#xff0c;需要找到变换前后的三对对应点进行求解。 from affine import Affine import numpy as np参考文献 矩阵最小二乘法求解仿射变换矩阵 def solve_affine(init_points, goal_points) -&…

位置式PID

// 单环PID参数 float Position_KP 0.0180, Position_KI 0.0013, Position_KD 0.11425; /* 位置式PID系数 */ /*************************************************************************** brief 位置式PID控制器* param 实际位置reality&#xff0c;目标位置target…

【CCF】Z字形扫描

这题的关键是将整个扫描的过程&#xff0c;拆分成很多次斜着操作数组的过程。 而且这个过程中可以建立如下规律&#xff1a; &#xff08;1&#xff09;一斜线上的元素个数与切换到下一条斜线这一操作之间建立规律。 先讨论左上部分的数组&#xff1a; 1&#xff09;当元素个…

小记java正则表达式中matcher.find() 和 matcher.matches() 的区别

matcher.find() 顾名思义&#xff0c;find为查找&#xff0c;其功能为查找字符串中是否有符合条件的字串&#xff08;包含本身&#xff09;&#xff0c;当查找到时即返回true&#xff0c;更多地与matcher.group(int i) 配合使用&#xff0c;用于从字符串中取出特定字串。 mat…