在Vue.js应用整合Spring Boot后端时，需要处理跨域请求。跨域请求通常发生在前端应用运行在不同的域名或端口上时，而后端服务运行在不同的域名或端口上。以下是一种处理跨域请求的常见方式：
后端（Spring Boot）配置
- 在Spring Boot项目中配置CORS（跨域资源共享）以允许来自前端应用的跨域请求。
@Configuration
public class CorsConfig {
@Bean
public 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以允许来自前端的跨域请求。