同源策略
很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略。
同源策略是由Netscape提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。同源策略是基于安全方面的考虑提出来的,这个策略本身没问题,但是我们在实际开发中,由于各种原因又经常有跨域的需求,传统的跨域方案是JSONP,JSONP虽然能解决跨域但是有一个很大的局限性,那就是只支持GET请求,不支持其他类型的请求,而今天我们说的CORS(跨域源资源共享)(CORS,Cross-origin resource sharing)是一个W3C标准,它是一份浏览器技术的规范,提供了Web服务从不同网域传来沙盒脚本的方法,以避开浏览器的同源策略,这是JSONP模式的现代版。
在Spring框架中,对于CORS也提供了相应的解决方案,今天我们就来看看SpringBoot中如何实现CORS。
前端请求
Welcome to nginx!
配置后端
/** * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@RestControllerpublic class CorsController { /** * 方法配置跨域 * @return String */ @RequestMapping("/CrossOrigin") public String crossOrigin(){ return "crossOrigin"; }}
打开前端页面,我们可以看一下,报错信息如下,也就是出现了跨域
通过CrossOrigin配置跨域
我们可以将@CrossOrigin注解到方法上,实现跨域请求,我们对后端方法改造如下:
/** * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@RestControllerpublic class CorsController { /** * 方法配置跨域 * @return String */ @RequestMapping("/CrossOrigin") @CrossOrigin(origins = "http://localhost:1234") public String crossOrigin(){ return "crossOrigin"; }}
通过CorsFilter配置跨域
继续后端改造
- 修改yaml文件,增加跨域配置信息
#配置跨域cors: allowedOrigin: - http://localhost:1234 allowCredentials: - true allowMethods: - GET - POST - PUT - DELETE maxAge: 7200 path: /**
- 增加CrosFilter配置文件
package org.lisen.cors.config;import lombok.Getter;import lombok.Setter;import org.springframework.boot.context.properties.ConfigurationProperties;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;import java.util.List;/** * 跨域配置 * * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@Configuration@ConfigurationProperties(prefix = "cors")@Getter@Setterpublic class CorsFilterConfig { private boolean allowCredentials; private List allowedOrigin; private List allowMethods; private long maxAge; private String path; /** * 配置跨域 * * @return CorsFilter */ @Bean public CorsFilter corsFilter() { CorsConfiguration corsConfiguration = new CorsConfiguration(); this.allowedOrigin.forEach(corsConfiguration::addAllowedOrigin); this.allowMethods.forEach(corsConfiguration::addAllowedMethod); corsConfiguration.setAllowCredentials(this.allowCredentials); corsConfiguration.setMaxAge(this.maxAge); UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); urlBasedCorsConfigurationSource.registerCorsConfiguration(this.path, corsConfiguration); return new CorsFilter(urlBasedCorsConfigurationSource); }}
- 增加请求
/** * @author laughing * @date 2020/9/26 * @site https://www.lisen.org */@RestControllerpublic class CorsController { /** * 方法配置跨域 * @return String */ @RequestMapping("/CrossOrigin")// @CrossOrigin(origins = "http://localhost:1234") public String crossOrigin(){ return "crossOrigin"; }}
再次请求,可以发现仍然能够正常访问
代码已上传到码云
下载代码
git clone https://gitee.com/lisen0629/lisen_org.git
使用
进入克隆的位置,执行命令进入对应工程
cd cors