cookie信息无法获取问题研究

2023-09-18 18:01:28

背景

在oneapi这个前后端都有的开源项目中,我想接入chatnextweb到oneapi的后端。

由于需要二开chatnextweb,添加登录注册功能,考虑到java后端的性能问题和内存占用,决定不重启写个服务,而是将登录注册接入到oneapi的登录注册api,没错,和oneapi的前端公用一套登录注册

熬了个大夜后,终于对接好了登录注册,并且数据写成功的流转了起来。

就在我以为没问题的时候,问题来了,前端在使用登录后的功能时,自动跳转到了登录页面,没错,前端判定当前页面出于未登录的状态。于是麻烦的debug开始了......

问题分析过程

梳理了一遍前端代码逻辑,关于是否登录的判断取决于token是否为空,在登录后,前端会将获取到了token暂存

紧接着在调用其他登录后的界面时,前端判断token是否为空,如果为空就不展示,并且跳转到登录界面,以下截图效果差不多,虽然没有登录跳转逻辑,但也放上来了

经过debug后,发现后端返回的token为空,梳理了后端代码,发现后端的鉴权是通过cookie和session,前端是通过token,但是问题不大,后端在注册时也会生成token,只需要调用获取token的接口即可。

于是我这么做了,新的问题也这么来了,鉴权失败,后端解析cookie里面的用户数据,解析为空.......

又分析了一波后端代码,发现在登录时,后端会将用户信息封装到session里面,然后保存到cookie中

最后封装后的cookie是这样的:

session=MTY5NTAwNTA3N3xEWDhFQVFMX2dBQUJFQUVRQUFCc180QUFCQVp6ZEhKcGJtY01CQUFDYVdRRGFXNTBCQUlBQWdaemRISnBibWNNQ2dBSWRYTmxjbTVoYldVR2MzUnlhVzVuREFZQUJISnZiM1FHYzNSeWFXNW5EQVlBQkhKdmJHVURhVzUwQkFNQV84Z0djM1J5YVc1bkRBZ0FCbk4wWVhSMWN3TnBiblFFQWdBQ3y5yImQjaV60qV8krs0fEG0tfGUzIu6sOCXYOTtpJaUlw==; Path=/; Expires=Wed, 18 Oct 2023 02:44:37 GMT; Max-Age=2592000

那么为什么会解析为空呢?oneapi自带的前端能正常解析,但新接入的前端解析就为空,为什么呢?网上给出的答案是因为跨域了,导致传入的cookie是新的cookie,所以没有数据,抱着怀疑的态度,我在后端写了一个获取cookie中用户数据的接口,并通过postman进行调用,尝试验证传入的cookie。

果然,网上果然不是很靠谱,用户数据成功解析,传入的cookie没有问题。

继续分析,说是非同源跨域导致的,cookie无法传入到后端,我想了想,前端调用localhost:3001/getCookie,然后转发到localhost:3000/getCookie,确实是非同源跨域,于是有了两种解决方案

  1. 使用代理
  2. 手动传入Cookie

使用代理

按照oneapi前端设置代理的方法进行设置,发现不可行,暂时放弃这条思路(感觉深究下去,使用代理是一定可行的,比如使用nginx等。)

手动传入Cookie

主要是想尝试一下手动传入Cookie,因为有大佬说它就是采用这种方案

居然还是解析失败,这就奇怪了

除了手动传入cookie,我还尝试添加 credentials: 'include',作用是即使跨域,也能成功传入cookie,但也不行

于是又开始了debug的过程,看了很多篇博客后,找到一个思路可行的,说后端需要配置跨域访问,记得之前看到过后端跨域的代码,又翻出来看了看,发现了问题:

func CORS() gin.HandlerFunc {
	config := cors.DefaultConfig()
	config.AllowAllOrigins = true
	config.AllowCredentials = true
	config.AllowMethods = []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"}
	config.AllowHeaders = []string{"*"}
	return cors.New(config)
}

func DefaultConfig() Config {
	return Config{
		AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
		AllowHeaders:     []string{"Origin", "Content-Length", "Content-Type"},
		AllowCredentials: false,
		MaxAge:           12 * time.Hour,
	}
}

问题就出在 AllowCredentials: false, 这一行,chatgpt告诉我,这代表了后端设置了不允许跨域认证,就是说你可以跨域,但不可以认证鉴权

所以前端调用不管是 手动传入cookie,还是添加 credentials: 'include',都不行,因为跨域了。

那么解决办法就很明显了,不要让它跨域,又得出了两个解决方案,使用代理,或者写全url。

关于写完整domain(就是url)

如果不写全量url,最后访问的是3001,也就是前端地址,然后前端再通过next等某些操作进行转发到3000(没细看),也就导致了非同源

所以需要写完整domain,并且可以不用手动传cookie

fetch('http://localhost:3000/api/user/token', {
  method: 'GET',
  headers: {
    "Content-Type": "application/json",
  },
})

总结

成功传入cookie的方案总结:

  1. 使用代理
  2. 使用全量domain
更多推荐

前端html原生页面兼容多端H5和移动端适配方案

目录图片代码最后图片是一个注册页面代码自己查看效果注意:单位全部用rem这样才能保证兼容性适配多端,px转rem转换公式1px=1/37.5rem所以想要20px应该对应20/37.5=0.53rem<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><met

【数据结构】时间、空间复杂度

⭐作者:小胡_不糊涂🌱作者主页:小胡_不糊涂的个人主页📀收录专栏:浅谈数据结构💖持续更文,关注博主少走弯路,谢谢大家支持💖时间、空间复杂度1.算法效率3.时间复杂度3.1时间复杂度的概念3.2大O的渐进表示法3.3推导大O阶方法3.4常见时间复杂度计算举例4.空间复杂度1.算法效率算法效率分析分为两种:第一种是

CPP-Templates-2nd--第 24 章 类型列表(Typelists)

目录24.1类型列表剖析(AnatomyofaTypelist)24.2类型列表的算法24.2.1索引(Indexing)24.2.2寻找最佳匹配24.2.3向类型类表中追加元素24.2.4类型列表的反转24.2.5类型列表的转换24.2.6类型列表的累加(AccumulatingTypelists)24.2.7插入排

python --windows自定义截图(并返回位置信息)

依赖:opencv-python4.0.0.21pyscreenshot3.1importcv2importpyscreenshotasImageGrabimportnumpyasnpimportwin32clipboardimportwin32conimportwin32guiimportpygetwindowasg

聚观早报 | iPhone 15系列正式发布;月饼专利申请超10000项

【聚观365】9月14日消息iPhone15系列正式发布月饼专利申请超10000项“五个女博士”自建研究院2023中国民营企业研发十强公布华为和小米达成全球专利交叉许可协议iPhone15系列正式发布2023年苹果秋季新品发布会如期而至。发布会上,苹果发布了iPhone15系列智能手机,以及AppleWatchSeri

使用Java将PPT、PPTX和PDF转换为图片

从Office到图片—使用Java实现文件格式转换PDF转图片1.万事第一步2.撸代码PPT/PPTX转图片1.万事第一步2.撸代码验收一下最近小雨遇到了一个需求,需要在前端小程序中嵌入展示Office文件的功能。然而,前端使用开源组件进行在线预览会导致性能消耗较大的问题(转半天圈圈)。产品理想的效果是用户上传Offi

《软件方法》第1章2023版连载(01)

DDD领域驱动设计批评文集做强化自测题获得“软件方法建模师”称号《软件方法》各章合集决定把第8章一部分关于“伪创新”的内容移到第1章,因此此次也更新第1章。第1章建模和UML牵着你走进傍晚的风里,看见万家灯火下面平凡的秘密。《情歌唱晚》;词:黄群,曲:黄群,唱:曹崴;19941.1利润=需求-设计1.1.1利润=需求-

什么是浏览器的同源策略(same-origin policy)?它对AJAX有什么影响?

聚沙成塔·每天进步一点点⭐专栏简介⭐浏览器的同源策略(Same-OriginPolicy)⭐同源策略对AJAX的影响⭐写在最后⭐专栏简介前端入门之旅:探索Web开发的奇妙世界欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一

WebGL 常用术语整理

目录Aα混合(alphablending)α值(alphavalue)环境光(ambientlight)连接(attach)attribute变量(attributevariable)B绑定(bind)缓冲区(buffer)缓冲区对象(bufferobject)C画布(canvas)裁剪(clipping)颜色缓冲区(

React 如何拿时间戳计算得到开始和结束时间戳

获取需要的时间戳(开始and结束时间戳)调用如下方法就行:functiongetWantTimestamp(props){//当前时间constnowDate=parseInt((newDate().getTime()/1000).toString());//当前时间switch(props){//当前时间时间戳cas

网站整站优化-网站整站优化工具

您是否曾为您的网站在搜索引擎中的排名而感到焦虑?是否苦苦思考如何提高流量、吸引更多用户?什么是整站优化。简而言之,它是一项用于提升网站在搜索引擎中排名的策略和技巧。通过对网站的内容、结构、速度等方面进行优化,可以使网站更容易被搜索引擎收录,从而提高在搜索结果中的排名。而147SEO工具是一款为您提供整站优化解决方案的强

热文推荐