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

飞熊 • 2024年1月10日下午10:12 • 技术随笔 • 阅读 240

在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 => {
        // 处理错误
      });
  }
}