今天我們來看一下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端口的數據
成功！