springboot CORS支持

CORS（Cross-Origin Resource Sharing）是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求。在Java EE开发中，最常见的前端跨域请求解决方案是JSONP，但是JSONP只支持GET请求，这是一个很大的缺陷，而CORS则支持多种HTTP请求方法。

配置跨域

方式一:在相应的请求方法上加注解

跨域有两个地方可以配置。一个是直接在相应的请求方法上加注解：

@RestController
@RequestMapping("/book")
public class BookController {
 
    @GetMapping("/list")
    public String getBook() {
        return "getBook list";
    }
 
    @PostMapping("/")
    @CrossOrigin(value = "http://localhost:8081", maxAge = 1800, allowedHeaders = "*")
    public String addBook(String name) {
        return "receive:" + name;
    }
 
    @DeleteMapping("/{id}")
    @CrossOrigin(value = "http://localhost:8081", maxAge = 1800, allowedHeaders = "*")
    public String deleteBookById(@PathVariable Long id) {
        return String.valueOf(id);
    }
 
}

• @CrossOrigin中的value表示支持的域，这里表示来自http://localhost:8081域的请求是支持跨域的。

• maxAge表示探测请求的有效期，在前面的讲解中，读者已经了解到对于DELETE、PUT请求或者有自定义头信息的请求，在执行过程中会先发送探测请求，探测请求不用每次都发送，可以配置一个有效期，有效期过了之后才会发送探测请求。这个属性默认是1800秒，即30分钟。

• allowedHeaders表示允许的请求头，*表示所有的请求头都被允许。

方式二:全局配置

这种配置方式是一种细粒度的配置，可以控制到每一个方法上。当然，也可以不在每个方法上添加@CrossOrigin注解，而是采用一种全局配置，代码如下：

@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/book/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(1800)
                .allowedOrigins("http://localhost:8081");
    }
}

• 全局配置需要自定义类实现WebMvcConfigurer接口，然后实现接口中的addCorsMappings方法。

• 在addCorsMappings方法中，addMapping表示对哪种格式的请求路径进行跨域处理；allowedHeaders表示允许的请求头，默认允许所有的请求头信息；allowedMethods表示允许的请求方法，默认是GET、POST和HEAD；*表示支持所有的请求方法；maxAge表示探测请求的有效期；allowedOrigins表示支持的域。

ajax请求页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery3.3.1.js"></script>
</head>
<body>
<div id="contentDiv"></div>
<div id="deleteResult"></div>
<input type="button" value="提交数据" onclick="postData()"><br>
<input type="button" value="删除数据" onclick="deleteData()"><br>
<input type="button" value="获取数据" onclick="getData()"><br>
<script>
 
    function getData() {
        $.ajax({
            url: 'http://localhost:8081/book/list',
            type: 'get',
            success: function (msg) {
                $("#contentDiv").html(msg);
            }
        })
    }
 
    function deleteData() {
        $.ajax({
            url: 'http://localhost:8081/book/99',
            type: 'delete',
            success: function (msg) {
                $("#deleteResult").html(msg);
            }
        })
    }
 
    function postData() {
        $.ajax({
            url: 'http://localhost:8081/book/',
            type: 'post',
            data: {name: '三国演义'},
            success: function (msg) {
                $("#contentDiv").html(msg);
            }
        })
    }
 
</script>
</body>
</html>