当前位置：首页 > article >正文

解决Spring+Vue的跨域问题

article 2025/1/21 10:47:17

文章目录

解决Spring+Vue的跨域问题
- 一、引言
- 二、前端Vue配置代理解决跨域
- - 1、配置代理
  - 2、使用axios发送请求
- 三、后端Spring配置解决跨域
- - 1、全局配置跨域策略
- 四、使用示例
- 五、总结

解决Spring+Vue的跨域问题

在这里插入图片描述

一、引言

在前后端分离的开发模式中，Spring和Vue是常用的后端和前端框架。然而，在开发过程中，我们经常会遇到跨域问题，即浏览器出于安全考虑，限制了不同源之间的请求。本文将介绍如何在Spring和Vue项目中解决跨域问题，确保前后端能够顺利通信。

二、前端Vue配置代理解决跨域

1、配置代理

在Vue项目中，可以通过修改vue.config.js文件来配置代理，将前端请求转发到后端服务器。具体步骤如下：

在项目根目录下创建或修改vue.config.js文件。

添加代理配置，如下所示：

JavaScript复制

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8081', // 后端服务器地址
                changeOrigin: true,
                pathRewrite: {'^/api': ''} // 重写路径，去掉/api前缀
            }
        }
    }
};

这样，当我们在前端发送请求到/api路径时，请求会被代理到http://localhost:8081。

2、使用axios发送请求

在Vue组件中，使用axios库发送请求时，只需访问配置的代理接口。例如：

JavaScript复制

axios.get('/api/data')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

这样，请求会被发送到http://localhost:8081/data。

三、后端Spring配置解决跨域

1、全局配置跨域策略

在SpringBoot的配置类中，可以通过实现WebMvcConfigurer接口来全局配置跨域请求。具体步骤如下：

创建一个配置类，例如CorsConfig。

实现WebMvcConfigurer接口，并重写addCorsMappings方法，如下所示：

java复制

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 允许跨域请求的路径
                .allowedOrigins("http://localhost:8080")    // 允许的域名
                .allowCredentials(true) // 允许携带认证信息(前后端保持一致)
                .maxAge(3600)   // 预检请求缓存时间，1小时
                .allowedHeaders("*")    // 允许的请求头
                .allowedMethods("GET", "POST", "PUT", "DELETE");   // 允许的方法
    }
}

这样，所有请求都会应用这个跨域策略。

四、使用示例

假设我们有一个SpringBoot后端接口/api/data，返回一些数据。在Vue前端，我们可以通过axios发送请求来获取这些数据：

JavaScript复制

// Vue组件中
methods: {
    fetchData() {
        this.$axios.get('/api/data')
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error(error);
            });
    }
}