Chapter 04 Spring-Boot CORS cross-domain processing
Article directory
foreword
-
Why use Spring-Boot?
You can refer to the official documentation.
-
What is Spring-Boot?
Refer to the official documentation for instructions.
-
official address
https://spring.io/projects/spring-boot
Target
- Complete the installation and configuration of Jenkins in Docker.
- Jenkins installed in Docker can provide external services normally.
- The Jenkins continuous integration service can be accessed and used normally in the external development environment.
environment
-
**VMware：**VMware Workstation 14 Pro
-
**Linux：**CentOS7.4
-
**Docker：**18.06.0-ce, build 0ffa825
-
**Jenkins：**Jenkins2.121.1
-
**JDK：**jdk1.8.0_172
-
**Spring-Boot：**2.0.4
-
**Eclipse：**Eclipse Neon.3 (4.6.3)
-
spring-tool-suite：
Version: 3.8.4.RELEASE
Build Id: 201703310825
Platform: Eclipse Neon.3 (4.6.3) -
**Maven：**3.5.0
1. Web development often encounters cross-domain problems. Solutions include: jsonp, iframe, CORS, etc.
CORS vs. JSONP
1. JSONP can only implement GET requests, while CORS supports all types of HTTP requests.
2. Using CORS, developers can use ordinary XMLHttpRequest to initiate requests and obtain data, which has better error handling than JSONP.
3. JSONP is mainly supported by old browsers, which often do not support CORS, and most modern browsers already support CORS browser support
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
2. In spring MVC, global rules can be configured, or @CrossOrigin annotation can be used for fine-grained configuration.
global configuration
@Configuration
public class CorsConfigurer implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 限制了路径和域名的访问，指定域名可跨域，不指定就允许所有都可以跨域
registry.addMapping("/cors/**").allowedOrigins("http://localhost:8080");
}
}
Global cross-domain Controller
@RestController
@RequestMapping("/cors")
public class CorsController {
@RequestMapping(value = "/get")
public HashMap<String, Object> get(@RequestParam String name) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("title", "hello world");
map.put("name", name);
return map;
}
}
Define method-level cross-domain Controller
@RestController
@RequestMapping(value = "/cors", method = RequestMethod.POST)
public class CorsController {
/*
* 通过使用注解@CrossOrigin，进行方法级细粒度跨域配置。
* 在某个方法上加这个注释就可以不用定义跨域配置
* 需要启动两个服务进行测试
*/
@CrossOrigin(origins = "http://localhost:8080")
@RequestMapping(value = "/get")
public HashMap<String, Object> get(@RequestParam String name) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("title", "hello world");
map.put("name", name);
return map;
}
}
To test cross-domain access, add this code to a cross-domain application page for cross-domain testing
测试 js：
$.ajax({
url: "http://localhost:8081/api/get",
type: "POST",
data: {
name: "测试"
},
success: function(data, status, xhr) {
console.log(data);
alert(data.name);
}
});
et",
type: “POST”,
data: {
name: “测试”
},
success: function(data, status, xhr) {
console.log(data);
alert(data.name);
}
});