Spring Boot中对CORS(Cross-Origin Resource Sharing 跨域资源共享)的支持

1、概念

Cors(Cross-Origin Resourece Sharing)是由W3C制定的一种跨域资源共享技术标准，目的是为了解决前端的跨域请求。

2、实验步骤

SpringBoot中配置Cors的步骤如下：

2.1 创建第一个Spring Boot工程（切记：本实验中，第一个工程的tomcat的接口为8086）。本实验中添加Web依赖。

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.2 创建控制器,同时添加跨域配置（这是方式①，方式②在下文。）

在新建的SpringBoot工程中，添加一个控制器（名字随意），这里以FilmControler举例：代码如下

/*** @author * @Description: 配置跨域，跨域可以在两个地方进行配置。①直接在方法进行配置。②采用全局配置* @Date:2019/7/31 14:04*/
@RestController
@RequestMapping("/film")
@Slf4j
public class FilmController {@PostMapping("/")//@CrossOrigin实现跨域注解。value表示支持的域；maxAge表示探测请求的有效期，1800表示30分钟，    探测请求不用每次都发送，// 只有过了有效期之后才会再次发送探测请求。//allowedHeaders表示允许的请求头，*表示所有的请求头都被允许。//origin="*"代表所有域名都可访问@CrossOrigin(value = "http://localhost:8081",maxAge = 1800, allowedHeaders = "*")public String addFilm(String name) {log.info("name" + name);return "receive" + name;}@DeleteMapping("/{id}")@CrossOrigin(value = "http://localhost:8081",maxAge = 1800, allowedHeaders = "*")public String deleteFilmById(@PathVariable Long id) {log.info("启用删除");return String.valueOf(id);}@GetMapping("/add")public String add() {return "hello";}
}

注：以上配置是一种细粒度的配置，可以控制在每一个方法上。当然，也可以不在每个方法上添加@CrossOrigin注解，而是通过编写配置类来进行一种全局配置，代码如下：

public class MyWebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {//addMapping表示对哪种格式的请求路径进行跨域处理；registry.addMapping("/film/**").allowedHeaders("*").allowedMethods("*").maxAge(1800).allowedOrigins("http://localhost:8086");}
}

强调：以上两种方式，选择其一即可。

2.3 测试

建立第二个Spring Boot项目（第二个工程的Tomcat接口为8081），添加Web依赖，然后再resources/static目录下加入jquery.js,再在resources/static目录下创建一个index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><!--对jquery进行引用 --><script src="jquery-3.3.1.min.js"></script>
</head>
<body><div id="contentDiv"></div><div id="deleteResult"></div><input type="button" value="提交数据" onclick="getData()"><br><input type="button" value="删除数据" onclick="deleteData()"><br><script>function deleteData() {alert("deleteData")$.ajax({url:'http://localhost:8086/film/99',type:'delete',success:function (msg) {$("#deleteResult").html(msg);}})}function getData() {$.ajax({url:'http://localhost:8086/film/',type:'post',data:{name:'银河补习班'},success:function (msg) {$("#contentDiv").html(msg);}})alert("Hello,getData")}</script>
</body>
</html>

上述index.html表明了两个普通的Ajax都发送了一个跨域请求。

将项目端口修改为8081.

启动第二个项目，访问地址“http://localhost:8081/index.html”，查看页面，并分别点击两个按钮，结果如下所示：