Cross-Origin跨站问题详解(跨站请求、跨站cookie)

背景:我部署frontend和backend到两个不同的docker容器,前端路径为http://localhost:3000,后端路径为http://localhost:4000。我设置了用户登录功能,并使用cookie进行session管理。当我的前端登录时,创建了一个session,而登录完成时个人信息被保存到session中,以后访问不同页面时只需要检查是否logged in即可,而这个logged in有一个专门的api

问题:用户登录时backend创建了一个session,而用户每次请求isLoggedIn API时,创建的是新的session,意味着一开始登录时创建的session根本没有被使用,导致用户不管访问什么页面,都被要求重新登录

原因:当然是cookie没有设置好,具体问题可以打开F12,查看网络,找到登录时请求的API,找到里面Set-Cookie的地方,比如下图
在这里插入图片描述

可以看到,这个cookie是接收到了,但旁边有个黄色警告
在这里插入图片描述
意味着在backend配置session时,需要设置sameSite为none,并且需要secure,即https协议而不是http

我已经配置了CORS,因此允许跨站请求
在这里插入图片描述
也配置了session
在这里插入图片描述
我设置了same site为none,这样就允许cross origin的cookie,但是cross origin的cookie还要求secure,不仅仅是要把secure改成true,还要使用https,不然cookie会被浏览器自动block,但我现在正在开发,并没有到上线的程度,所以还不想申请SSL/STL证书,但是还没有找到如何让chrome不要使用这么strict的policy。

目前的办法是换一个浏览器,比如星愿,亲测可行。


不过问题来了,为什么我的前后端都是localhost,却还是被当作所谓的cross-origin跨站?这是因为这个所谓的cross origin,不仅仅是看domain域名,还有使用的protocol(如http),以及使用的端口,而我的前后端端口不一样,因此同样被当作cross-origin。所以需要配置CORS以及在处理用户session和cookie时想办法先绕过这个问题,等网站上线时再去配置HTTPS

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值