一、引言

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

那什么是跨域呢？

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

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

当前页面url	被请求页面url	是否跨域	原因
http://www.scorpios.com/	http://www.scorpios.com/index.html	否	同源（协议、域名、端口号相同）
http://www.scorpios.com/	https://www.scorpios.com/index.html	跨域	协议不同（http/https）
http://www.scorpios.com/	http://www.baidu.com/ 跨域	主域名不同	（scorpios/baidu）
http://www.scorpios.com/	http://blog.scorpios.com/ 跨域	子域名不同	（www/blog）
http://www.scorpios.com:8080/	http://www.scorpios.com:7001/	跨域	端口号不同（8080/7001）

注意：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，可以在框架中配置代理，是支持的