springboot解决前后端交互跨域问题

本文介绍了在前后端分离项目中遇到的跨域问题,以及Chrome浏览器的SameSite安全机制导致的Cookie无法传递的问题。解决方法包括在后端Controller类上添加@CrossOrigin注解,在前端设置xhrFields的withCredentials属性,以及针对Chrome91版本以上,通过修改快捷方式参数禁用特定的Cookie设置。此外,还提供了调整浏览器设置的临时解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述

在前后端分离项目中,由于前端要接收后端接口返回的数据而产生的错误信息(跨域问题)。

错误信息

Access to XMLHttpRequest at 'http://localhost:8090/user/getotp' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法

后端:

  1. 在对象的Controller类上加上注解@CrossOrigin。
@CrossOrigin(originPatterns = "*",allowCredentials = "true",allowedHeaders = "*")

  1. 前端数据交互部分要加上以下内容:
 xhrFields:{withCredentials:true}

你可能会遇到如下问题:
  前后端设置的都没问题了,但是设置在session域中的值,还是不能进行跨域访问。
跨域问题解决方案,有问题的童鞋看过来。
  google配置后仍然无法正确获取otpcode。由于谷歌浏览器的SameSite安全机制的问题,浏览器在跨域的时候不允许request请求携带cookie,导致每次sessionId都是新的,这里有个出问题前提:跨域,刚好和调试时的环境情况一致。浏览器版本chrome84.0.4147.135(谷歌游览器好像从80版本之后就加入了SameSite安全机制),直接在地址栏里输入chrome://flags/,然后在搜索框里搜索关键字SameSite,找到与之匹配的项SameSite by default cookies,将其设置为Disabled,然后关闭浏览器再打开,请求。

更新:
chrome91版本cookie禁用:
解决办法:
创建chrome快捷方法,右键–属性:在目标中加入以下内容:

–disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure

启动项目调试的时候,需要用使用快捷方法打开的浏览器。

### SpringBoot 和 Vue 前后端分离项目在毕业答辩中的常见问题及应对方法 #### 一、技术架构相关问题 1. **为什么选择 SpringBoot 和 Vue 进行开发?** - SpringBoot 提供了一种快速构建 Java 应用的方式,简化了配置过程并支持自动装配功能[^3]。Vue 是一种渐进式的前端框架,能够灵活地集成到现有项目中,并提供高效的组件化开发模式。 2. **项目的整体架构是什么样的?** - 该项目采用前后端分离的架构方式,后台通过 SpringBoot 实现 RESTful API 接口服务,数据库选用 MySQL8.0 并借助 MyBatis-Plus 完成数据持久层操作;前台则由 Vue 驱动,配合 Element UI 组件库完成页面渲染和交互逻辑。 #### 二、具体实现细节 1. **如何解决问题?** - 问题是由于浏览器同源策略引起的,在本项目中可以通过设置 CORS(Cross-Origin Resource Sharing)来允许特定名访问资源。例如,在 SpringBoot 中全局启用支持可通过如下代码片段实现: ```java @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("*"); } }; } ``` 此外,也可以在 `main.js` 文件中引入 Axios 并绑定至 Vue 的原型链上以便统一管理 HTTP 请求,从而减少因路径错误引发的潜在风险[^5]。 2. **富文本编辑器是如何集成到系统的?** - 使用 WangEditor 插件作为在线文档编辑工具,它具备所见即所得的功能特性以及良好的兼容性和扩展性。将其嵌入到 Vue 页面时需先安装依赖包再初始化实例对象即可正常使用。 #### 三、时间规划与版本迭代 1. **整个项目的周期安排是怎样的?** - 自立项以来经过需求分析阶段明确了核心模块范围之后进入编码调试环节直至最终交付成果物为止大约耗时两个月左右的时间度。其中特别强调的是,在最后一个月期间也就是预计日期区间为2025年4月中旬至同年五月中下旬之间要集中精力针对初审意见作出相应调整优化直至形成正式版提交审核机构备案存档待查同时做好迎接公开评审的各项准备活动[^2]。 #### 四、质量保障措施 1. **测试覆盖哪些方面?** - 测试工作贯穿始终主要包括单元测试验证单个函数或者类的行为是否符合预期效果;接口联调确认不同子系统间通信协议的一致性有效性;性能压测评估高并发场景下的响应速度稳定性等方面的内容[^1]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值