CORS支持

本是古典何须时尚 2022-11-30 15:50 166阅读 0赞

CORS（Cross-Origin Resource Sharing)是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求，且CORS支持多种HTTP请求方式。  
在Spring boot中配置CORS步骤如下：  
1、创建Spring boot项目，添加Web依赖

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

2、配置跨域  
有两种方式  
1》直接在相应的请求方法上加注解  
@CrossOrigin(value = “域”, maxAge = 1800,allowedHeaders = “\*”)

@RestController
    @RequestMapping("/book")
    public class Book { 
    
        /* * CrossOrigin中的value表示支持的域，这里表示来自http://localhost:8081域的请求是支持跨域的 * maxAge表示探测请求的有效期 * allowedHeaders表示允许的请求头，*表示所有的请求头都被允许 * */
    
        @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);
        }
    }

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

@Configuration
    public class MyWebMvcConfig implements WebMvcConfigurer { 
        @Override
        public void  addCorsMappings(CorsRegistry registry){ 
    // addMapping表示对哪种格式的请求路径进行跨域处理
            registry.addMapping("/book/**")
                    .allowedHeaders("*")
    // allowedMethods表示允许的请求方法
                    .allowedMethods("*")
                    .maxAge(1800)
    //                allowedOrigins表示支持的域
                    .allowedOrigins("http://localhost:8081");
        }
    }

3、测试  
新建一个Spring boot项目，添加Web依赖，在resources/static目录下加入jquery.js，并在该目录下创建一个index.html文件，内容如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/jquery-3.3.1.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() { $.ajax({ url:'http://localhost:8080/book/99', type: 'delete', success:function (msg) { $("#deleteResult").html(msg); } }) } function getData() { $.ajax({ url:'http://localhost:8080/book/', type:'post', data:{ name:'三国演义'}, success:function (msg) { $("#contentDiv").html(msg); } }) } </script>
    </body>
    </html>

将该项目端口改为8081

server.port=8081

启动项目，在浏览器中访问地址http://localhost:8081/index.html，分别点击两个按钮，效果如下所示：  
![在这里插入图片描述][20200825095936189.png_pic_center]

[20200825095936189.png_pic_center]: /images/20221123/f270bf6b2ef44028a249dc2e08df4492.png