springboot webflux 跨域示例

最新推荐文章于 2024-04-08 18:14:54 发布

o_瓜田李下_o

最新推荐文章于 2024-04-08 18:14:54 发布

阅读量934

点赞数

分类专栏： webflux

本文链接：https://blog.csdn.net/weixin_43931625/article/details/106898130

版权

webflux 专栏收录该内容

24 篇文章 8 订阅

订阅专栏

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 lang="en" 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");
    }
}