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

更新时间：2023年09月01日 15:24:44 作者：java李杨勇

本文介绍了解决Spring Boot前端Vue跨域问题的实战经验,并提供了后端和前端的配置示例,通过配置后端和前端,我们可以轻松解决跨域问题,实现正常的前后端交互,需要的朋友可以参考下

一、跨域问题的原因

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

二、解决方案

1. 后端配置

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

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

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前后端分离开发模式中的跨域问题的文章就介绍到这了,更多相关Spring Boot前后端分离跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

java 集合并发操作出现的异常ConcurrentModificationException
Map在遍历时候通常现获得其键值的集合Set，然后用迭代器Iterator来对Map进行遍历。
2009-06-06
IntelliJ IDEA教程之clean或者install Maven项目的操作方法
这篇文章主要介绍了IntelliJ IDEA教程之clean或者install Maven项目的操作方法,本文分步骤给大家介绍两种方式讲解如何调试出窗口，需要的朋友可以参考下
2023-04-04
Spring自动装配之方法、构造器位置的自动注入操作
这篇文章主要介绍了Spring自动装配之方法、构造器位置的自动注入操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-08-08
java 单元测试对h2数据库数据清理方式
这篇文章主要介绍了java 单元测试对h2数据库数据清理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-09-09
Spring boot项目打包成jar运行的二种方法
这篇文章主要给大家介绍了关于Spring boot项目打包成jar运行的二种方法，文中通过示例代码介绍的非常详细，对大家学习或者使用spring boot具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
Springboot2.x 使用 Log4j2 异步打印日志的实现
这篇文章主要介绍了Springboot2.x 使用 Log4j2 异步打印日志的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
使用Guava Cache原理及最佳实践
文章介绍了GuavaCache,这是一种支持高并发的本地缓存,它支持多种回收策略,如基于容量、时间和引用的回收,并提供了自动加载、定时刷新和显式清除缓存的功能,文章还讨论了GuavaCache的适用场景和使用方法,并通过代码示例和源码分析,帮助读者更好地理解和使用GuavaCache
2025-02-02
SpringMvc后台接收json数据中文乱码问题详解
这篇文章主要介绍了SpringMvc后台接收json数据中文乱码问题详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
Java 基础语法之解析 Java 的包和继承
包是组织类的一种方式，继承顾名思义，比如谁继承了长辈的产业，其实这里的继承和我们生活中的继承很类似，下面文字将为大家详细介绍Java的包和继承
2021-09-09
java:程序包org.apache.ibatis.annotations不存在报错解决
这篇文章主要给大家介绍了关于java:程序包org.apache.ibatis.annotations不存在报错的解决方法,这个错误是我在直接导入springboot项目的时候报错的,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-04-04