当前位置: 首页 > news >正文

解决Spring Boot前后端分离开发模式中的跨域问题

在实际开发中,经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验,帮助开发者快速解决该问题。

一、跨域问题的原因

跨域问题是由于浏览器的同源策略引起的。同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。当协议、主机名或端口号不同时,浏览器就会认为这是跨域访问,从而拒绝请求。

二、解决方案

1. 后端配置

在Spring Boot后端项目中,我们可以通过添加跨域配置允许前端Vue应用的跨域请求。

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowedHeaders("*").allowCredentials(true).maxAge(3600);}
}

以上代码中使用@Configuration注解标注一个配置类,并实现WebMvcConfigurer接口。在addCorsMappings方法中,配置了允许所有来源(allowedOrigins("*"))、所有HTTP方法(allowedMethods("*"))、所有请求头(allowedHeaders("*"))、支持跨域携带Cookie(allowCredentials(true))以及缓存时间(maxAge(3600))。

2. 前端配置

在Vue前端项目中,我们可以通过配置vue.config.js文件来解决跨域问题。

module.exports = {devServer: {proxy: {'/api': {target 'http://localhost:8080',  // 后端API接口地址changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

以上代码中,我们通过devServer配置项的proxy属性来配置代理。将请求路径中以api开头的请求代理到指定的后端API接口地址(这里是http://localhost:8080)。changeOrigin设置为true表示开启跨域。

三、实战示例

在实际开发中,我们可以通过以下示例来演示解决Spring Boot端Vue跨域问题的实战经验。

后端代码示例:

@RestController
@RequestMapping("/api")
public class HelloController {@GetMapping("/hello")public String hello() {return "Hello, World!";}
}
```javascript
axios.get('/api/hello').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

以上示例中,后端提供了一个简单的接口/api/hello,前端通过axios发送GET请求来获取数据。

四、总结

本篇博客介绍了解决Spring Boot前端Vue跨域问题的实战经验,并提供了后端和前端的配置示例。通过配置后端和前端,我们可以轻松解决跨域问题,实现正常的前后端交互。希望本文能对开发者有所帮助,欢迎大家扩散分享!

以上内容仅供参考,具体情况还需根实际项目进行调整。如有更好的解决方案,欢迎留言讨论。

参考资料

  • Spring Boot官方文档
  • Vue官方文档
  • Axios官方文档
  • MDN Web Docs - 同源策略

相关文章:

解决Spring Boot前后端分离开发模式中的跨域问题

在实际开发中,经常会遇到前端Vue应用与后端Spring Boot API接口存在跨域访问的问题。本篇博客将分享解决Spring Boot前端Vue跨域问题的实战经验,帮助开发者快速解决该问题。 一、跨域问题的原因 跨域问题是由于浏览器的同源策略引起的。同源策略限制了…...

常见前端面试之VUE面试题汇总五

13. assets 和 static 的区别 相同点: assets 和 static 两个都是存放静态资源文件。项目中所 需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件 下,这是相同点 不相同点:assets 中存放的静态资源文件在…...

带着问题看SpringBoot

带着问题看SpringBoot 1、Spring容器具体是什么? 跟进run方法,context this.createApplicationContext(),得出容器是AnnotationConfigServletWebServerApplicationContext类。 SpringApplication.run(ServeroneApplication.class, args);…...

【Go 基础篇】Go语言匿名函数详解:灵活的函数表达式与闭包

介绍 在Go语言中,函数是一等公民,这意味着函数可以像其他类型的值一样被操作、传递和赋值。匿名函数是一种特殊的函数,它没有固定的函数名,可以在代码中被直接定义和使用。匿名函数在Go语言中具有重要的地位,它们常用…...

MobileNet、MobileNetV2和MobileNetV3创新点总结

当谈论MobileNet、MobileNetV2和MobileNetV3时,我们指的是一系列基于深度学习的轻量级神经网络架构,这些架构旨在在保持高度准确性的同时减少模型的计算和参数量。以下是它们各自的创新点的详细总结: MobileNet: 深度可分离卷积&…...

算法:数据转换处理2(云台显控)

#define DISPLAYFUNC #include"define.h" extern OS_EVENT *KEYMsg; uchar mBlank[21] = " " ; u c h a r s t r v g a [ ] = " 0.00 V "; uchar str_vga[] = "0.00V...

让大数据平台数据安全可见-行云管家

数字化经济在快速发展,大数据时代已经到来,大数据已经成为企业和政府决策的重要依据。然而大数据行业快速发展所带来的一系列安全问题也继续解决,例如数据安全更难保障,例如认证体系不完善等等。为此行云管家推出了大数据平台数据…...

微信小程序开发教学系列(3)- 页面设计与布局

3. 页面设计与布局 在微信小程序开发中,页面的设计和布局是非常重要的。一个好的页面设计可以提升用户体验,并使小程序更加吸引人。本章节将介绍如何设计和布局微信小程序的页面。 3.1 页面结构和样式的创建和设置 在创建微信小程序页面时&#xff0c…...

基于JSP+Servlet+mysql员工权限管理系统

基于JSPServletmysql员工权限管理系统 一、系统介绍二、功能展示四、其他系统实现五、获取源码 一、系统介绍 项目类型:Java web项目 项目名称:基于JSPServlet的员工权限管理系统[qxxt] 项目架构:B/S架构 开发语言:Java语言 …...

Qt 自定义提示框 右下角冒泡

网页右下角上经常会出现一些提示性的信息,B/S有的东西,C/S当然也可以有,就像QQ的消息提示一样! 实现一个类似的东西并不困难,只要想明白原理实现起来就很简单了! 实现原理: (1&#…...

js、PHP连接外卖小票机打印机方案(调用佳博、芯烨等)

前言: 目前开发需要用到电脑直接连接外卖小票机打印小票,查阅各种资料,使用 6612345浏览器 终于解决了这个问题。 效果: PHP、js直接连接小票机并且自动出票。 支持的小票机: 目前测试可以的有:电脑A4打印…...

window定时备份MySQL数据库,默认备份7天,一小时备份一次

echo off setlocalrem 在Windows中添加任务计划以执行批处理脚本,请按照以下步骤操作:rem 打开Windows的“任务计划程序”应用程序。你可以通过按下Win R键,在运行对话框中输入taskschd.msc,然后按回车键来打开它。rem 在任务计划…...

正则中常见的流派及其特性

目前正则表达式主要有两大流派(Flavor):POSIX 流派与 PCRE 流派。 1、 POSIX 流派 POSIX 规范定义了正则表达式的两种标准: BRE 标准(Basic Regular Expression 基本正则表达式);ERE 标准&am…...

.net6.0引用的dll放置单独的文件夹

.net6.0 采用原有的设置方法不起作用 <?xml version"1.0" encoding"utf-8" ?> <configuration><startup> <supportedRuntime version"v4.0" sku".NETFramework,Versionv4.8" /></startup><runtim…...

CMake:检测外部库---自定义find模块

CMake:检测外部库---自定义find模块 导言项目结构CMakeLists.txt附录 导言 上一篇&#xff0c;我们了解了CMake其中一种自定义检测外部库的方式&#xff0c;本篇将展示通过编写一个find模块来定位系统上的ZeroMQ库&#xff0c;以便能够在非Unix操作系统上检测该库。 项目结构…...

vue直接使用高德api

第一步&#xff1a;在index.html 引入 <script src"https://webapi.amap.com/maps?v2.0&key你的key"></script>第二步&#xff1a;在你需要地图的时候 放入 <template><div style"width: 200px; height: 200px"><div id&q…...

Setting

目录 1 Setting 1.1.1 getChildList 1.1.2 getGroupList 1.1.3 setListener setOnChildClickListenermSettingList.setOnChildClickListener(new OnChildClickListener() {onChildClick...

时序预测 | Matlab实现SO-CNN-BiGRU蛇群算法优化卷积双向门控循环单元时间序列预测

时序预测 | Matlab实现SO-CNN-BiGRU蛇群算法优化卷积双向门控循环单元时间序列预测 目录 时序预测 | Matlab实现SO-CNN-BiGRU蛇群算法优化卷积双向门控循环单元时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 时序预测 | Matlab实现SO-CNN-BiGRU蛇群算法优化…...

论文浅尝 | KRACL-利用图上下文和对比学习的稀疏KG补全

笔记整理&#xff1a;李娟&#xff0c;浙江大学博士&#xff0c;研究方向为知识图谱表示学习 论文链接&#xff1a;https://arxiv.org/pdf/2208.07622.pdf 代码链接&#xff1a;https://github.com/TamSiuhin/KRACL 介绍 知识图谱&#xff08;KG&#xff09;通常是不完整的&…...

【C++】右值引用,移动语义,完美转发

目录 右值引用移动语义拷贝构造与移动构造 万能引用与完美转发 右值引用 左值&#xff1a;可以出现在赋值符号的左边和右边&#xff0c;左值可以取地址。 右值&#xff1a;右值可以出现在赋值符号右边&#xff0c;不能出现在左边&#xff0c;右值不能取地址。 左值/右值引用就…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

python打卡day49@浙大疏锦行

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...

无需布线的革命:电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...

记一次spark在docker本地启动报错

1&#xff0c;背景 在docker中部署spark服务和调用spark服务的微服务&#xff0c;微服务之间通过fegin调用 2&#xff0c;问题&#xff0c;docker容器中服务器来后&#xff0c;注册中心都有&#xff0c;调用服务也正常&#xff0c;但是调用spark启动任务后报错&#xff0c;报错…...