前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >跨域无法设置cookie的问题

跨域无法设置cookie的问题

原创
作者头像
帅的一麻皮
修改2020-07-06 10:16:54
6.6K0
修改2020-07-06 10:16:54
举报
文章被收录于专栏:前端与Java学习前端与Java学习

记录一个今天在练习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值,就不会出现这么棘手的问题了。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 记录一个今天在练习nodejs的时候遇到的一个跨域无法存取cookie的问题
    • 于是纠结了大半天,最后找出原因是因为跨域而造成的,这是浏览器的同源策略导致的问题:不允许JS访问跨域的Cookie,所以我们没办法存取值。于是百度了许久寻找解决方案,解决需要从两个方面解决:
      • 1.客户端需要设置Ajax请求属性xhrFields: {withCredentials: true},让Ajax请求都带上Cookie。crossDomain: true:跨域请求为true如果你想强制跨域请求(如JSONP形式)同一域,设置crossDomain为true。例如,服务器端重定向到另一个域
        • 2.服务器端使用CROS协议解决跨域访问数据问题时,需要设置响应消息头:
        • 以上两步是大多数博客的解决方案:最好的还是自己再本机地址访问,避免跨域存取cookie值,就不会出现这么棘手的问题了。
        相关产品与服务
        消息队列 TDMQ
        消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档