前后端分离跨域大坑，赶紧run！！！！

以你之姓@ 2023-09-24 21:43 6阅读 0赞

问题阐述：

今天写项目的时候遇到一个跨域带cookie的大坑，还没遇到的朋友们看了记得避开哦！

首先是这样的，前端我用的是vue3，采用axios携带cookie到后端，但是会发现，无法携带cookie,在检查时，我发现我的Set-Cookie语句末有一个黄色警告！

![d35048f5253a4080a6d29d819ba046df.png][]

点击发现是

> 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问题，还没有解决开头的问题哦！

![bc3bebe091e746899ae649ed3670c413.png][]

虽然咋们前端发送请求能够携带cookie啦，但是我的项目突然增加了跨域问题，于是又查询了度娘，发现，后端也需要设置allowCredentials = "true"，我的后端使用注解来解决跨域问题的，所以只需要在注解内添加参数信息即可：

![b8adb816cf0848c28ff4af58079643cf.png][]

添加完之后，启动项目，发现跨域是解决了，但是cookie没有种成功！！！也就是文章开头的问题，百思不得其解，在网上也搜了很多，最后发现就是要设置**secure为true same-site为none。**

![c06c70b5088b4a8a854d7fb004bf0674.png][]

重启项目，cookie终于种上啦，大功告成！

[d35048f5253a4080a6d29d819ba046df.png]: https://img-blog.csdnimg.cn/img_convert/d35048f5253a4080a6d29d819ba046df.png
[bc3bebe091e746899ae649ed3670c413.png]: https://img-blog.csdnimg.cn/img_convert/bc3bebe091e746899ae649ed3670c413.png
[b8adb816cf0848c28ff4af58079643cf.png]: https://img-blog.csdnimg.cn/img_convert/b8adb816cf0848c28ff4af58079643cf.png
[c06c70b5088b4a8a854d7fb004bf0674.png]: https://img-blog.csdnimg.cn/img_convert/c06c70b5088b4a8a854d7fb004bf0674.png