springboot解决前端跨域问题

springboot解决前端跨域问题

场景：开发SpringBoot+Vue前后端分离项目时在前端请求后端数据库的数据时报错。

原因：前后端的端口不一致

• 前端接口：localhost:8080
• 后端接口：localhost:9090

解决办法：在后端设置跨域

• 新建config包，创建CorsConfig类：
  

• 添加如下代码：

  import org.springframework.context.annotation.Bean;
  import org.springframework.context.annotation.Configuration;
  import org.springframework.web.cors.CorsConfiguration;
  import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  import org.springframework.web.filter.CorsFilter;
  
  @Configuration
  public class CorsConfig {
  
      // 当前跨域请求最大有效时长。这里默认1天
      private static final long MAX_AGE = 24 * 60 * 60;
  
      @Bean
      public CorsFilter corsFilter() {
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          CorsConfiguration corsConfiguration = new CorsConfiguration();
          corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址
          corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
          corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
          corsConfiguration.setMaxAge(MAX_AGE);
          source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
          return new CorsFilter(source);
      }
  }
  

• 成功获取数据：