解决Spring+Vue的跨域问题

2025/2/5 12:44:04 来源：https://blog.csdn.net/NiNg_1_234/article/details/145209142 浏览: 次关键词：解决Spring+Vue的跨域问题

文章目录

解决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 {@Overridepublic 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);});}
}