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

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

一、跨域问题的原因

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

二、解决方案

1. 后端配置

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

java 复制代码
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public 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文件来解决跨域问题。

bash 复制代码
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跨域问题的实战经验。

后端代码示例:

java 复制代码
@RestController
@RequestMapping("/api")
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}
html 复制代码
```javascript
axios.get('/api/hello')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

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

四、总结

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

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

参考资料

相关推荐
是发财不是旺财17 分钟前
跟着deepseek学golang--认识golang
开发语言·后端·golang
我的golang之路果然有问题17 分钟前
快速上手GO的net/http包,个人学习笔记
笔记·后端·学习·http·golang·go·net
Apifox.18 分钟前
Apifox 4月更新|Apifox在线文档支持LLMs.txt、评论支持使用@提及成员、支持为团队配置「IP 允许访问名单」
前端·人工智能·后端·ai·ai编程
界面开发小八哥1 小时前
Java开发工具IntelliJ IDEA v2025.1——全面支持Java 24、整合AI
java·ide·人工智能·intellij-idea·idea
BXCQ_xuan1 小时前
基于Node.js的健身会员管理系统的后端开发实践
后端·mysql·node.js
普兰店拉马努金1 小时前
【高中数学/古典概率】4红2黑六选二,求取出两次都是红球的概率
java·概率
智商低情商凑1 小时前
CAS(Compare And Swap)
java·jvm·面试
yangmf20401 小时前
使用 Logstash 迁移 MongoDB 数据到 Easysearch
java·elasticsearch·搜索引擎
Tiger_shl1 小时前
【Python语言基础】24、并发编程
java·数据库·python
拉满buff搞代码2 小时前
搞定 PDF“膨胀”难题:Python + Java 的超实用压缩秘籍
后端