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 {
    @Override
    public 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”，查看页面，并分别点击两个按钮，结果如下所示：