SpringBoot处理前后端CORS跨域


文章目录

  • SpringBoot处理前后端CORS跨域
  • 背景
  • 同源策略
  • 解决方法
  • 使用注解@CrossOrigin
  • @CrossOrigin参数解析
  • 使用配置类
  • 上代码
  • 跨域产生的问题CSRF


背景

现在大部分公司Web开发都是前后端分离的模式。前后端分离的话，可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器，直接在本地开发，然后通过一些插件来将api请求转发到后台，这样就可以完全模拟线上的场景，并且与后台解耦。前端可以独立完成与用户交互的整一个过程，两者都可以同时开工，不互相依赖，开发效率更快，而且分工比较均衡。

前后端分离需要后端写接口给前端调用，一般在开发过程中，后端写好的SpringBoot项目运行在服务器上，而前端则再其本地调用后端写好的接口，而浏览器为了安全设置了一种叫同源策略的东西，这就会导致我们所说的跨域问题

同源策略

同源策略是由 Netscape 提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同（也就是说请求与被请求方的协议，域名，端口只要有一个不同，就会引起跨域问题）。

同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是 JSONP，JSONP 虽然能解决跨域但是有一个很大的局限性，那就是只支持 GET 请求，不支持其他类型的请求。

解决方法

使用注解@CrossOrigin

  1. 直接在方法或者Controller上使用SpringBoot提供的注解@CrossOrigin

@CrossOrigin参数解析

  • value：所有支持域的集合，例如"http://www.baidu.com"表示允许域名www.baidu.com访问这个接口，这些值都显示在请求头中的Access-Control-Allow-Origin “*” 代表所有域的请求都支持 。如果没有定义，所有请求的域都支持。
  • allowedHeaders： 允许请求头中的header，默认都支持
  • exposedHeaders： 响应头中允许访问的header，默认为空
  • methods： 请求支持的方法，例如"{RequestMethod.GET, RequestMethod.POST}"}。默认支持RequestMapping中设置的方法
  • allowCredentials： 是否允许cookie随请求发送（允许为true，否则false)，使用时必须指定具体的域,默认false
  • maxAge: 预请求的结果的有效期，默认30分钟，单位为秒

使用配置类

上代码
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings (CorsRegistry registry) {
        //允许所有形式的跨域请求
        registry.addMapping ("/**") // 此处配置那些路径需要跨域 /** 表示本应用的所有方法都会去处理跨域请求
                .allowedOrigins ("*")
                .allowCredentials (true)
                .allowedMethods ("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge (3600);
    }

    //运行跨域,上线后注释掉
    private CorsConfiguration buildConfig () {
        CorsConfiguration corsConfiguration = new CorsConfiguration ();
        List<String> list = new ArrayList<> ();
        list.add ("*");
        corsConfiguration.setAllowedOrigins (list);
		   
		// 请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
		corsConfiguration.addAllowedOrigin ("*");
        corsConfiguration.addAllowedHeader ("*");
        corsConfiguration.addAllowedMethod ("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter () {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource ();
        source.registerCorsConfiguration ("/**", buildConfig ());
        return new CorsFilter (source);
    }
}

跨域产生的问题CSRF