解决Spring+Vue的跨域问题

文章目录

解决Spring+Vue的跨域问题

解决Spring+Vue的跨域问题

一、引言

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

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

1、配置代理

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

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

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

JavaScript复制

javascript 复制代码

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

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

2、使用axios发送请求

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

JavaScript复制

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复制

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复制

javascript 复制代码

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

在SpringBoot后端，我们配置了全局跨域策略，允许来自http://localhost:8080的请求。同时，在Vue项目中，我们配置了代理，将/api路径的请求转发到后端服务器。这样，前后端就可以顺利通信，解决跨域问题。

五、总结

通过在Vue项目中配置代理和在SpringBoot项目中配置全局跨域策略，我们可以有效地解决Spring+Vue项目中的跨域问题。前端通过代理将请求转发到后端，后端通过全局配置允许特定域名的请求，从而实现前后端的顺利通信。希望本文的介绍能帮助你在开发过程中顺利解决跨域问题。

参考文章：