场景说明

前后端分离项目，前端使用vue，后端是springboot项目
部署的架构是负载均衡方案，使用nginx代理所有的前端，前端动态获取后端的地址来进行访问
部署架构图如下：

前端配置

前端使用的是vue，用于调用后端接口的工具是axios
axios的配置如下：

后端配置

后端我使用的是filter来配置的

根据上面前后端的配置之后，基本可以解决跨域问题

遇到问题

每次请求的JSESSIONID都不一样

如果您使用的是Chrome浏览器，每次前端请求后端时，JSESSIONID都会变（也就是无法保持会话）
那么请注意"Response Headers"当中的“Set-Cookie”最右边是否有黄色的感叹号，如下图

解决办法

如果有上图的黄色感叹号，那么解决办法如下图
1.Chrome浏览器地址栏中输入chrome://flags
2.搜索“SameSite”
3.将“SameSite by default cookies”的设置改为“disabled”（修改前的值为default）
4.将“Cookies without SameSite must be secure”的设置改为“disabled”（修改前的值为default）

Java前后端分离项目跨域问题相关推荐

解决java前后端分离端口跨域问题
解决java前后端分离端口跨域问题参考文章: (1)解决java前后端分离端口跨域问题 (2)https://www.cnblogs.com/mollie-x/p/10449686.html 备忘一 ...
前后端分离项目跨域问题及解决方案
目录 1.什么是跨域 2.前后端分离项目中的跨域问题 3.方法一:SpringBoot后端进行处理 4.方法二:在Vue前端进行处理 5.总结 1.什么是跨域请求同域资源: 在域名 (或 ip 地址 ...
06-若依前后端分离项目跨域问题解决方式
什么是跨域跨域就是前后端分离项目前端无法把session等信息传递给后端服务器.跨域源自浏览器同源策略.同源策略是一种约定,同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互. ...
Vue flask前后端分离解决跨域
Vue flask前后端分离解决跨域安装axios 在项目目录下输入:npm install axios--save-dev 配置axios 在main.js中引入axios import axio ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
Vue+Flask前后端分离 Vue3跨域配置
Vue+Flask前后端分离 Vue3跨域配置前端端口号为8080 后端端口号为5000 问题描述问题解决接口路径映射前端端口号为8080 后端端口号为5000 后端端口API 代码片. @a ...
Spring Boot2.x-13前后端分离的跨域问题解决方法之Nginx
文章目录概述浏览器同源策略后台搭建 pom.xml interceptor 配置 Controller 启动测试浏览器和session 后端工程发布到服务器上问题复现通过Nginx反向代理 ...
前后端分离的跨域解决方案
声明: 在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调试上由纯 ...
前后端分离与跨域的解决方案（CORS的原理）
前后端分离前后端分离的好处最大的好处就是前端JS可以做很大部分的数据处理工作,对服务器的压力减小到最小. 后台错误不会直接反映到前台,错误接秒较为友好. 由于后台是很难去探知前台页面的分布情况,而 ...
宝塔-Java前后端分离项目-前端静态资源的访问
1.创建好站点记得把前后端分离勾选,点击设置 2.点击配置文件添加配置代码 location / {try_files $uri $uri/ /index.html;} 然后就可以正常的访问了 ...

Java前后端分离项目跨域问题