Spring Boot——后端通过添加CorsConfig来解决跨域问题

问题详情

• 如图，前台在访问后端接口时，提示如下错误信息，在网上查询资料后发现是跨域的问题

  

• 跨域详情：

现代浏览器出于安全的考虑，使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略，否则就是跨域的HTTP请求，默认情况下是被禁止的。跨域HTTP请求是指A域上资源请求了B域上的资源，举例而言，部署在A机器上Nginx上的js代码通过ajax请求了部署在B机器Tomcat上的RESTful接口。

IP（域名）不同、或者端口不同，都会造成跨域问题。为了解决跨域的问题，曾经出现过jsonp、代理文件等方案，应用场景受限，维护成本高，直到HTML5带来了CORS协议。

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。它通过服务器增加一个特殊的Header[Access-Control-Allow-Origin]来告诉客户端跨域的限制，如果浏览器支持CORS、并且判断Origin通过的话，就会允许XMLHttpRequest发起跨域请求。

代码配置

• 环境：
  ide：idea 20.1.3
  spring boot 2.4.4

• 代码
  项目结构
  
  置于config目录下

  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 GlobalCorsConfig {
  
      /**
       * 允许跨域调用的过滤器
       */
      @Bean
      public CorsFilter corsFilter() {
          CorsConfiguration config = new CorsConfiguration();
          //允许所有域名进行跨域调用
          config.addAllowedOriginPattern("*");
          //允许跨越发送cookie
          config.setAllowCredentials(true);
          //放行全部原始头信息
          config.addAllowedHeader("*");
          //允许所有请求方法跨域调用
          config.addAllowedMethod("*");
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          source.registerCorsConfiguration("/**", config);
          return new CorsFilter(source);
      }
  }