springboot webflux 跨域示例
**********************
应用 1
***************
controller 层
RedirectController
@Controller
public class RedirectController {
@RequestMapping("/index")
public String index(){
return "index";
}
}
HelloController
@RestController
public class HelloController {
@RequestMapping("/hello")
public Map<String,String> hello(ServerWebExchange exchange){
exchange.getRequest().getHeaders().forEach((key,value) ->{
System.out.println(key+" ==> "+value);
});
Map<String,String> map=new HashMap<>();
map.put("info","hello world");
return map;
}
}
***************
前端页面
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$.get({
url: "/hello",
success: function (result) {
$("#data").html(result.info)
}
})
});
$("#btn2").click(function () {
$.get({
url: "http://localhost:8081/hello",
success: function (result) {
$("#data2").html(result.info)
}
})
});
})
</script>
</head>
<body>
<div th:align="center">
<button id="btn">获取数据</button>
<button id="btn2">获取数据2</button><br>
<span id="data"></span><br>
<span id="data2"></span>
</div>
</body>
</html>
**********************
应用 2
***************
配置文件
application.properties
server.port=8081
***************
controller 层
HelloController
@RestController
public class HelloController {
@RequestMapping("/hello")
public Map<String,String> hello(ServerWebExchange exchange){
exchange.getRequest().getHeaders().forEach((key,value) -> {
System.out.println(key+" ==> "+value);
});
Map<String,String> map=new HashMap<>();
map.put("info","hello world2");
return map;
}
}
**********************
使用测试
localhost:8080/index
点击获取数据，可正常获取数据
点击获取数据2，由于跨域，不能正常获取数据
***************
控制台输出
应用1
Host ==> [localhost:8080]
Connection ==> [keep-alive]
Accept ==> [*/*]
X-Requested-With ==> [XMLHttpRequest]
User-Agent ==> [Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36]
Referer ==> [http://localhost:8080/index]
Accept-Encoding ==> [gzip, deflate, br]
Accept-Language ==> [zh-CN,zh;q=0.9]
应用2
Host ==> [localhost:8081]
Connection ==> [keep-alive]
Accept ==> [*/*]
Origin ==> [http://localhost:8080]
User-Agent ==> [Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36]
Referer ==> [http://localhost:8080/index]
Accept-Encoding ==> [gzip, deflate, br]
Accept-Language ==> [zh-CN,zh;q=0.9]
由于跨域，请求头多了一个Origin，用来标识请求的来源
**********************
应用 2 添加跨域配置
***************
config 层
WebFluxConfig
@Configuration
public class WebFLuxConfig implements WebFluxConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/hello")
.allowedOrigins("http://localhost:8080");
}
}
**********************
使用测试
添加跨域配置后，可正常获取数据