Springboot系列23-解决跨域问题

一、引言

---

 

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

 

 

 

 

那什么是跨域呢？

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

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

当前页面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中解决跨域的两种方式 

---

 

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

 

2.1 独立微服务

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

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

 

2.2 独立微服务

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

@Configurationpublic 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，可以在框架中配置代理，是支持的。