Summary:
CROS (Cross-Origin Resource Sharing) is a cross-domain resource sharing technical standards developed by the W3C, the purpose of the front end in order to solve cross-domain requests, in JavaEE development, the most common solution for front-end cross-domain requests are JSONP, but JSONP support only Get request, but CROS supports multiple HTTP request methods.
If the server supports the CROS, the server has a response header Access-Control-Allow-Origin field, the value of this field is used to record the domain change access resources, when the browser receives such response header information extracted Access-Control- allow-Origin value field and found to contain fields where the current page, you know that this is allowed cross-domain, not their limitations.
1. Local Configuration:
Controller: a add a delete interfaces
@RestController @RequestMapping("/book") public class BookController { @PostMapping("/a") @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 = 1800, allowedHeaders = " *")
which support the value field that indicates from http: // localhost: 8081 requesting field is supported across domains,
the maxAge indicates validity probe request (sending DELETE, PUT request or self-defined request header information in execution, first sends a probe request and send the request, the probe request has validity is the maxAge), 1800 seconds by default
allowedHeaders representation allows request header, * denotes allow
2. Global Configuration :
Need to write a class that implements the interface WebMvcConfigurer rewrite addCrosMappings methods, methods
addMapping request indicates which format processing of cross-domain
allowedHeaders representation allows request header, the default *
allowedMethods representation allows the request method, the default GET POST HEAD
maxAge probe request is valid
allowedOrigins expressed support for a domain
@Configuration public class MyWebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/book/**") .allowedHeaders("*") .allowedMethods("*") .maxAge(1800) .allowedOrigins("http://localhost:8081"); } }
test:
Two projects start port number 8080,8081
In the index.html Ajax requests 8081 to 8080
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="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 deleteData() { $.ajax({ url:'http://localhost:8080/book/99', type:'delete', success:function (msg) { $("#deleteResult").html(msg); } }) } function postData() { $.ajax({ url:'http://localhost:8080/book/a', type:'post', Data: {name: ' Three Kingdoms ' }, success:function (msg) { $("#contentDiv").html(msg); } }) } </script> </body> </html>
8080 in the controller:
@RestController @RequestMapping("/book") public class BookController { @PostMapping("/a") @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); } }
May request the data, the completion of the cross-domain