一、引言

现在的项目很多都是前后端分离的项目，方便升级，也方便开发。那么前端项目访问后台服务就会出现下面这个问题，跨域。 那什么是跨域呢？

跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，看下示例：

注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。 浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

二、SpringBoot中解决跨域的两种方式

那么在后台该如何解决跨域问题呢？这要分为两种情况，第一种情况是独立微服务，第二种情况就是多微服务。

1. 独立微服务

对于这种情况，处理方法比较简单，只需要在每个Controller上加上一个支持跨域的注解：@CrossOrigin

@CrossOrigin
@RestController
public class HomeController{
          
   
    @RequestMapping(path="/home")
    public String home() {
          
   
        return "home";
    }
}

2. 多微服务

如果有多个微服务，就需要在网关gateway中配置支持跨域的配置。

@Configuration
public class CustomCorsConfiguration {
          
   

    @Bean
    public CorsWebFilter corsWebFilter(){
          
   
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        CorsConfiguration corsConfiguration = new CorsConfiguration();

        //1、配置跨域
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        // corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.setAllowCredentials(true);

        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsWebFilter(source);
    }
}

上面就是两种在后台解决跨域问题的方法。

三、前端解决跨域的方式

在前端的话，有和方式呢？

正常情况下，可以用nginx做反向代理 如果使用一些框架的话，比如vue-admin-template，可以在框架中配置代理，是支持的