专栏首页前端与Java学习跨域无法设置cookie的问题
原创

跨域无法设置cookie的问题

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

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

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

const cors = require('cors');
const cookieSession = require('cookie-session');

然后配置了响应的中间件

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协议解决跨域访问数据问题时,需要设置响应消息头:

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

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端day15-JS(WebApi)学习笔记(三大家族、事件对象、getComputedStyle)

    offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop

    帅的一麻皮
  • 前端移动web-day02学习笔记

    特点:子元素的宽度如果超出父元素:子元素不会超出,伸缩盒子会进行合理分配

    帅的一麻皮
  • Git学习01-Learn Git Branching(在线学习工具)

    网址:https://learngitbranching.js.org/?locale=zh_CN

    帅的一麻皮
  • cookie、sessionStorage、localStorage

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    用户1212940
  • Ubuntu代理下安装软件

    1、方案一 在命令行窗口执行(临时有效) export http_proxy=http://127.0.0.1:8080 export http...

    苦咖啡
  • Scrapy快速入门系列(2) | 简单一文教你学会如何安装Scrapy并创建项目(超级详细哦!)

    官方文档地址:https://docs.scrapy.org/en/latest/intro/install.html#intro-install

    不温卜火
  • Android应用架构

    来源: 小鄧子(@Rx小鄧子) Android开发生态圈的节奏非常之快。每周都会有新的工具诞生,类库的更新,博客的发表以及技术探讨。如果你外出度假一个月,当你回...

    编程范 源代码公司
  • 首个镜子分割网络问世,大连理工、鹏城实验室、中国香港城大出品 | ICCV 2019

    镜子作为日常生活中非常重要的物体无处不在,不仅能够反射光线,能呈现出周围物体或者场景的镜像。

    量子位
  • 性能测试--3、性能测试过程

    在性能测试项目中大部分的时间花费在获取需求、验证需求以及实现需求上,只有这样才能为性能测试打下坚实的基础。其余的时间则用于录制事务脚本、执行性能测试和分析测试结...

    叨叨软件测试
  • Greenplum数据导入系列 -- (二)数据库实时同步

    Greenplum作为数据仓库的计算引擎,其数据来源多是业务数据,其中以MySQL为主。那如何将数据从MySQL同步到Greenplum中?如果是离线同步,比如...

    lambgong

扫码关注云+社区

领取腾讯云代金券