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