跨域无法设置cookie的问题

2020-07-06 10:16:54 浏览数 (1)

记录一个今天在练习nodejs的时候遇到的一个跨域无法存取cookie的问题

我想实现的功能就是：在登录页面输值进行登录之后可以把用户的信息存入到cookie中，判断用户是否在登录状态。

使用的是express框架，里面用到了两个相关的模块：cors跨域和express的cookie-session模块，导包如下：

代码语言：javascript复制
const cors = require('cors');
const cookieSession = require('cookie-session');

然后配置了响应的中间件

代码语言：javascript复制
app.use(cors());
// 设置cookie中间件
app.use(cookieSession({
    name: 'session',
    keys: ['zhangsan', 'shuai'], //加密用的加盐技术
    maxAge: 24 * 60 * 60 * 1000 //过期的时间:24小时后过期
}))

然后将用户名和密码按照cookie-session模块的使用文档存入到cookie中

逻辑都没有问题之后，我启动服务器在本地中打开了登录页面。

然后输入数据发送请求后，在浏览器Network响应头信息中也能明显的找到对应请求中设置了cookie信息。

但是当我去Application去找cookie的值时候发现里面并没有值。

于是纠结了大半天，最后找出原因是因为跨域而造成的，这是浏览器的同源策略导致的问题：不允许JS访问跨域的Cookie，所以我们没办法存取值。于是百度了许久寻找解决方案，解决需要从两个方面解决：

1.客户端需要设置Ajax请求属性xhrFields: {withCredentials: true}，让Ajax请求都带上Cookie。crossDomain: true：跨域请求为true如果你想强制跨域请求（如JSONP形式）同一域，设置crossDomain为true。例如，服务器端重定向到另一个域

2.服务器端使用CROS协议解决跨域访问数据问题时，需要设置响应消息头：

代码语言：javascript复制
res.setHeader("Access-Control-Allow-Credentials",true);
//因为设置允许携带cookie之后那么请求头Access-Control-Allow-Origin的值就不能设置为*，所以要另外指向一个
res.setHeader("Access-Control-Allow-Origin","http://localhost:8089/");

以上两步是大多数博客的解决方案：最好的还是自己再本机地址访问，避免跨域存取cookie值，就不会出现这么棘手的问题了。

express ajax 网络安全

0 人点赞