前后端分离跨域大坑,赶紧run!!!!
前后端分离之大坑坑!vue3携带cookie却无法将cookie种到浏览器上吗,别犹豫,快来看看!!!
·
问题阐述:
今天写项目的时候遇到一个跨域带cookie的大坑,还没遇到的朋友们看了记得避开哦!
首先是这样的,前端我用的是vue3,采用axios携带cookie到后端,但是会发现,无法携带cookie,在检查时,我发现我的Set-Cookie语句末有一个黄色警告!
点击发现是
This attempt to set a cookie via a Set-Cookie header was blocked because it had the "SameSite-lax' attribute but came from a crosssite response which was not the response to a top-level naviqation.
这个问题我们放到最后去解决,先解决前端前端传递cookie问题。
首先我们在axios全局配置中添加:
myAxios.defaults.withCredentials = true;
这样当我们发送axios请求时就能够携带cookie请求啦,这只是解决的携带cookie问题,还没有解决开头的问题哦!
虽然咋们前端发送请求能够携带cookie啦,但是我的项目突然增加了跨域问题,于是又查询了度娘,发现,后端也需要设置allowCredentials = "true",我的后端使用注解来解决跨域问题的,所以只需要在注解内添加参数信息即可:
添加完之后,启动项目,发现跨域是解决了,但是cookie没有种成功!!!也就是文章开头的问题,百思不得其解,在网上也搜了很多,最后发现就是要设置secure为true same-site为none。
重启项目,cookie终于种上啦,大功告成!
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)