前后端分离项目，前端cookie获取不到的解决方案

最近在写前后端分离项目中发现，后端在response中添加cookie后

response.addCookie(cookie)

前端却无法拿到cookie，但是在网络抓包中确实存在cookie

但是在Application中却找不到cookie

判断错误出在跨域上，因为我前端是8080接口，后端是9090，所以后端保存的cookie前端有接受到，但是无法保存。

解决问题是在跨域配置中将Credentials属性设置为true，一开始我的跨域配置中没有这个属性。

后端配置的跨域文件：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.setAllowCredentials(true); //允许接受cookiecorsConfiguration.addAllowedOriginPattern("*"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置return new CorsFilter(source);}
}

注意：添加 corsConfiguration.setAllowCredentials(true); 后，要把原来的

corsConfiguration.addAllowedOrigin("*");

改成：

corsConfiguration.addAllowedOriginPattern("*");

前端配置（这里我用的是axios请求）：

单次配置:

 request.post("http://localhost:9090/login", this.form, {withCredentials: true}).then((res) => {}

统一配置

axios.defaults.withCredentials = true;

配置完就可以拿到cookie了

前后端分离项目，前端cookie获取不到的解决方案相关推荐

宝塔-Java前后端分离项目-前端静态资源的访问
1.创建好站点记得把前后端分离勾选,点击设置 2.点击配置文件添加配置代码 location / {try_files $uri $uri/ /index.html;} 然后就可以正常的访问了 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
06-若依前后端分离项目跨域问题解决方式
什么是跨域跨域就是前后端分离项目前端无法把session等信息传递给后端服务器.跨域源自浏览器同源策略.同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互. ...
springboot前后端分离项目MultipartFile获取前端传的file为null问题
[问题描述] springboot+vue 前后端分离项目,在对接上传文件功能时,一直显示文件为空. [分析] 查找了很多博客,解决方法五花八门,但原因应该还是 springboot自带的org.sp ...
阿里云视频上传视频获取进度条问题(使用session方案,获取进度一直为0的解决方案)补充:前后端分离项目中获取进度解决方案
1.场景描述: 之前用阿里云上传视频,前端反应上传视频经常出现获取视频url失败问题.但是接口我测过很多遍都是没有问题的.后台这边提供了一个视频上传的接口返回一个videoId,还提供了一个根据vid ...
[软技能] 在前后端分离项目里，请说说前端传递的token的流程？
[软技能] 在前后端分离项目里,请说说前端传递的token的流程? (一):cookie前端 post 账号密码,后端 response header: set-cookie, 将 token 插入 ...
前后端分离项目，后端是如何处理前端传递的token？
前后端分离项目中,在不使用 SpringSecurity.Shiro 安全框架的情况下,后端是如何处理前段传递的 token 的呢? 简单说一个场景,在一个非常小的项目中,由于业务逻辑比较简单,也没有 ...
【两万字图文详解】运动会管理系统-前后端分离-项目开发：【后端】SpringBoot, SpringMVC, MyBatis【前端】Vue.js，ElementUI
项目名称:运动会管理系统技术栈: 后端:SpringBoot,SpringMVC,MyBatis,tkmapper,Maven聚合工程等前端:Vue.js,Element-u ...
SpringBoot前后端分离项目中如何制作前端jar包（类似swaggerUI前端jar包制作方法）
SpringBoot前后端分离项目中如何制作前端jar包(类似swaggerUI前端jar包制作方法) 可用于SpringBoot引用的前端UI的Jar包,类似于SwaggerUI包 WABJAR介绍 ...

前后端分离项目，前端cookie获取不到的解决方案

后端配置的跨域文件：

前端配置（这里我用的是axios请求）：

前后端分离项目，前端cookie获取不到的解决方案相关推荐

最新文章

热门文章