vue学习-10vue整合SpringBoot跨域请求

在Vue.js应用整合Spring Boot后端时，需要处理跨域请求。跨域请求通常发生在前端应用运行在不同的域名或端口上时，而后端服务运行在不同的域名或端口上。以下是一种处理跨域请求的常见方式：

后端（Spring Boot）配置

1. 在Spring Boot项目中配置CORS（跨域资源共享）以允许来自前端应用的跨域请求。

@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("http://localhost:8080"); // 允许指定的前端应用跨域访问 也可以 *config.addAllowedHeader("*");config.addAllowedMethod("*"); //允许所有的请求方式//.allowedMethods("GET", "POST", "PUT", "DELETE"); 只允许限定的请求方式跨域  source.registerCorsConfiguration("/**", config);return new CorsFilter(source);}
}

在上述示例中，我们配置了允许前端应用运行在http://localhost:8080上的跨域请求。你应该根据你的前端应用的实际地址进行配置。

前端（Vue.js）配置
在Vue.js应用中，确保使用了axios或其他HTTP库来发送请求，并进行相应的配置。

首先，安装axios（如果未安装）：

npm install axios

在Vue.js应用中的全局配置中，设置axios的baseURL，这将指定后端API的地址。在Vue的main.js文件或其他适当的地方添加以下代码：

import axios from 'axios';// 设置axios的baseURL
axios.defaults.baseURL = 'http://localhost:8081'; // 后端API的地址// ...其他全局配置

这里的http://localhost:8081应该是你后端Spring Boot应用的地址。确保与后端的实际地址匹配。

现在，你可以在Vue组件中使用axios来发送请求，例如：

methods: {fetchData() {axios.get('/api/data').then(response => {// 处理响应数据}).catch(error => {// 处理错误});}
}

这样，你的Vue.js应用就能够与后端的Spring Boot服务进行跨域通信。确保后端API的地址和端口与前端配置的axios baseURL 匹配，以确保请求被正确路由到后端。同时，配置后端的CORS以允许来自前端的跨域请求。