【SpringBoot学习第十三天】CORS支持----即跨域问题

最新推荐文章于 2024-07-15 11:49:16 发布

Love_云宝儿

最新推荐文章于 2024-07-15 11:49:16 发布

阅读量201

点赞数

本文链接：https://blog.csdn.net/m0_38084879/article/details/103511253

版权

后台同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

Spring boot

18 篇文章 0 订阅

订阅专栏

java

18 篇文章 0 订阅

订阅专栏

今天我们来看一下Springboot的CORS支持。

首先，什么是CORS？

CORS指的是跨域问题，即跨域是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。比如说我们有两个Tomcat，一个是8070端口，一个是8071端口，如果想让两个Tomcat进行通信，那么是需要进行支持的。现在绝大多数的浏览器都已经支持了跨域问题，比如JSONP、或iframe等等。接下来我们来看一下Springboot支持的跨域问题。

首先我们新建一个CORS类，加入@Configuration注解，改注解表示这个类是配置类。（8070端口）

CORSConfiguration.java

package com.example.demo.configuration;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Description 
 * 自定义CORS配置类,实现WebMvcConfigurer接口，重写addCorsMappings方法
 * @Author wangs
 * @Date 2019/12/12 16:25
 */
@Configuration  //声明这是一个配置类
public class CORSConfiguration implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedHeaders("*").allowedMethods("*");
    }
}

然后我们编写一个Controller，访问数据路径为“/json/getJson”，

package com.example.demo.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @Description TODO
 * @Author wangs
 * @Date 2019/12/217:05
 */

@Controller
@RequestMapping(value = "/json/")
public class JSonController {


    @RequestMapping("getJson")
    @ResponseBody
    public Map<String,Object>getJson(){
        Map<String,Object>map =new HashMap<>();
        map.put("熊道远","沙雕");
        map.put("田雨","制杖");
        map.put("周科","耳鼻");
        return map;
    }
}

本地请求没问题

然后我们编写一个8071端口html，发送ajax请求请求8070端口的服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>core</title>
    <script type="text/javascript" src="/cors/lib/jquery-3.4.1.min.js"></script>
</head>
<body>
    <button id="btn">点击获取8070的数据</button>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            $.post("http://localhost:8070/demo/json/getJson", function (map) {
                    console.log(map);
                }
            );
        });
    });
</script>

然后我们是用8071端口访问8070端口的数据