springboot 跨域示例

浅浅的花香味﹌ 2023-02-23 08:51 172阅读 0赞

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

### springboot 跨域示例 ###

**跨域：一个应用的前端页面向不同域（协议、域名、端口不全相同）的应用请求数据**

**说明：**跨域请求会自动**添加header字段origin**表示请求来源，**默认情况下跨域请求会被服务端接受并处理，但是浏览器不会接受跨域请求结果**，需做配置后才可接收

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

**应用 1**

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

**config 层**

**WebConfig**

@Configuration
    public class WebConfig implements WebMvcConfigurer {
    
        @Override
        public void addViewControllers(ViewControllerRegistry registry) {
            registry.addViewController("/index").setViewName("index");
        }
    }

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

**controller 层**

**HelloController**

@RestController
    public class HelloController {
    
        @RequestMapping("/hello")
        public Map<String,String> hello(HttpServletRequest request){
            Enumeration<String> headers=request.getHeaderNames();
            while (headers.hasMoreElements()){
                String header=headers.nextElement();
    
                System.out.println(header+" ==> "+request.getHeader(header));
            }
    
            Map<String,String> map=new HashMap<>();
            map.put("info","hello，瓜田李下");
    
            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.yml**

server:
      port: 8081

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

**controller 层**

**HelloController**

@RestController
    public class HelloController {
    
        @RequestMapping("/hello")
        public Map<String,String> hello(HttpServletRequest request){
            Enumeration<String> headers=request.getHeaderNames();
            while (headers.hasMoreElements()){
                String header=headers.nextElement();
    
                System.out.println(header+" ==> "+request.getHeader(header));
            }
    
            Map<String,String> map=new HashMap<>();
            map.put("info","欢迎你");
    
            return map;
        }
    }

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

**使用测试**

**localhost:8080/index**

![20200708101128111.png][]

**点击获取数据**

![20200708101523960.png][]

**点击获取数据2，无法获取数据**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70][]

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

**控制台输出**

**应用 1**

2020-07-08 10:16:22.550  INFO 6452 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
    2020-07-08 10:16:22.555  INFO 6452 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 5 ms
    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
    cookie ==> isg=BJiYP7OIcordkV4OUKLufIy5acYqgfwLBTEbVdKJqlOGbThXepNTm7QMoaXdorTj

**应用 2**

2020-07-08 10:16:25.402  INFO 1524 --- [nio-8081-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
    2020-07-08 10:16:25.418  INFO 1524 --- [nio-8081-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 16 ms
    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

**说明：应用 2多了一个origin请求头，并且不能读取属于应用1 的cookie数据**

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

**跨域配置：应用 2**

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

**config 层**

**WebConfig**

@Configuration
    public class WebConfig implements WebMvcConfigurer {
    
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("http://localhost:8080");
        }
    }

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

**使用测试**

**localhost:8080/index**

**                        **![20200708102547948.png][]

**点击获取数据**

![20200708102741179.png][]

**点击获取数据2**

![20200708102903296.png][]

**应用2 配置跨域后，浏览器可正常获取跨域请求返回的数据**

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

**控制台输出**

**应用 1**

2020-07-08 10:27:00.531  INFO 22460 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
    2020-07-08 10:27:00.532  INFO 22460 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
    2020-07-08 10:27:00.536  INFO 22460 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 4 ms
    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
    cookie ==> isg=BJiYP7OIcordkV4OUKLufIy5acYqgfwLBTEbVdKJqlOGbThXepNTm7QMoaXdorTj

**应用 2**

2020-07-08 10:28:15.859  INFO 16648 --- [nio-8081-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
    2020-07-08 10:28:15.868  INFO 16648 --- [nio-8081-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 9 ms
    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

**此时应用 2仍无法读取属于应用 1的cookie数据，****需在请求端发送设置withCredentials、应用 2设置allowCredentials才可读取数据**

[20200708101128111.png]: https://img-blog.csdnimg.cn/20200708101128111.png
[20200708101523960.png]: https://img-blog.csdnimg.cn/20200708101523960.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200708101725982.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ==,size_16,color_FFFFFF,t_70
[20200708102547948.png]: https://img-blog.csdnimg.cn/20200708102547948.png
[20200708102741179.png]: https://img-blog.csdnimg.cn/20200708102741179.png
[20200708102903296.png]: https://img-blog.csdnimg.cn/20200708102903296.png