第04章 Spring-Boot CORS跨域处理
前言
-
为什么要使用 Spring-Boot?
可参考官方文档。
-
什么是 Spring-Boot?
可参考官方文档说明。
-
官方地址
https://spring.io/projects/spring-boot
目标
- 完成 Jenkins 在 Docker 中的安装与配置。
- 安装在 Docker 中的 Jenkins 能正常对外提供服务。
- 在外部开发环境中能正常访问和使用 Jenkins 持续集成服务。
环境
-
**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
一、 Web 开发经常会遇到跨域问题,解决方案有: jsonp, iframe,CORS 等等。
CORS 与 JSONP 相比
1、 JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 HTTP 请求。
2、 使用 CORS,开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据,比起 JSONP 有更好的 错误处理。
3、 JSONP 主要被老的浏览器支持,它们往往不支持 CORS,而绝大多数现代浏览器都已经支持了 CORS 浏览器支持情况
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
二、 在 spring MVC 中可以配置全局的规则,也可以使用@CrossOrigin 注解进行细粒度的配置。
全局配置
@Configuration
public class CorsConfigurer implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 限制了路径和域名的访问,指定域名可跨域,不指定就允许所有都可以跨域
registry.addMapping("/cors/**").allowedOrigins("http://localhost:8080");
}
}
全局跨域 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;
}
}
定义方法级跨域 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;
}
}
测试跨域访问,在一个需要跨域的应用页面中加上这段代码用于跨域测试
测试 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);
}
});