今天我们来看一下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端口的数据
成功！