springboot webflux 跨域示例

深藏阁楼爱情的钟 2023-02-20 02:34 12阅读 0赞

--------------------

### 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**

![20200623100542517.png][]

**点击获取数据，**可正常获取数据

**点击获取数据2，由于跨域，**不能正常获取数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70][]

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

**控制台输出**

**应用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");
        }
    }

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**使用测试**

**添加跨域配置后，可正常获取数据**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70 1][]

[20200623100542517.png]: https://img-blog.csdnimg.cn/20200623100542517.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200623102034151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200623102401564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ==,size_16,color_FFFFFF,t_70