SpringBoot對jsonp跨域請求的支持
在前端跨域時如果使用post提交會被自動轉爲get方式，這是因爲跨域所使用的數據格式爲jsonp。
Spring-boot系列(14）:jsonp的用法
https://www.cnblogs.com/JQKA/p/11050245.html
模擬一個跨域訪問
修改hosts文件（C:\Windows\System32\drivers\etc\hosts），
添加
127.0.0.1 www.a.com
127.9.0.1 www.b.com
WebMvcConfigurer
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedHeaders("*")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "DELETE", "PUT")
//表示是否允許發送Cookie。默認情況下Cookie不包括在CORS請求中。當設爲true時表示服務器明確許可，Cookie可以包含在請求中一起發送給服務器。
.allowCredentials(true)
.maxAge(3600 * 24);
}
接口
@RestController
public class TestController {
@RequestMapping(value="/test")
public String test(HttpServletRequest req)
{
String callback = req.getParameter("callback");
return callback + "({\"name\" : \"zhangSan\"})";
}
}
ajax
Ajax = 異步 JavaScript 和XML。
Ajax是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
Cors是什麼
CORS全稱爲Cross Origin Resource Sharing（跨域資源共享）, 每一個頁面需要返回一個名爲Access-Control-Allow-Origin的http頭來允許外域的站點訪問，你可以僅僅暴露有限的資源和有限的外域站點訪問。
JSONP
jsonp是個非正式的傳輸協議，jsonp之所以能夠繞過瀏覽器的同源策略是因爲除了JavaScript裏的Ajax和Fetch請求，其他的請求都不受同源策略的限制——換句話說除了ajax請求，網頁中其他的如css，js腳本等資源文件的請求，不會因爲跨域而被限制訪問。jsonp正是利用了這一點，完成了跨域數據請求。
JSONP的優缺點
優點：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；並且在請求完畢後可以通過調用callback的方式回傳結果。
缺點：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
<html>
<head>
<title>SpringBoot</title>
<script src="./jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function test() {
$.ajax({
type:'get',
url:'http://www.b.com:8080/test',
contentType: 'application/json; charset=UTF-8',
dataType:'jsonp',
jsonp:"callback",
jsonpCallback:"success_jsonpCallback",
success:function (data)
{
$("#showDiv").append("<p>"+data.name +"</p>");
},
error:function (err) {
alert('err!');
}
});
}
</script>
</head>
<body>
<div id="showDiv">
<input type="button" value="test請求" onclick="test()" />
</div>
</body>
</html>
使用jQuery獲取跨域數據：
dataType : “jsonp”, // 返回的數據類型，設置爲JSONP方式
jsonp : ‘callback’, //jsonp默認值是"callback"
1.jsonp、jsonpCallback jsonp跨域時可以自定義的兩個參數
2.jsonp: 回掉函數名的參數名，默認值callback，服務端通過它來獲取回調函數名，指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback
3.jsonpCallback: 回掉函數名，默認值是以jQuery開頭的字符串，這個字符串就是函數調用的名稱。
4.指定jsonpCallback時可以將回掉函數寫在ajax外面做其他操作，不指定時不能這樣做，只能在success裏做操作
eval() 函數
eval(data); // 局部變量，eval()函數可以執行參數裏的表達式
由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。加上圓括號使eval函數在處理JavaScript代碼的時候強制將括號內的表達式（expression）轉化爲對象。
alert(eval("{}"); // RETURN UNDEFINED
alert(eval("({})");// RETURN object[Object]
請求與響應
1訪問index.html頁面
http://www.a.com:8080/
2點擊按鈕，調用Ajax
http://www.b.com:8080/test?callback=success_jsonpCallback&_=1566382579338
3返回結果
success_jsonpCallback({“name” : “zhangSan”})
Headers
ajax返回成功卻進入了error
接口返回的數據成功，狀態是200，但就是沒進入success。
原因：後臺返回的數據類型不是json的，而我們在ajax裏面指定的dataType類型是json的，數據類型不一致就會導致出現進入error的問題。
參考資料
所謂的跨域（Cross-Origin），究竟是什麼？
https://blog.csdn.net/u011037503/article/details/78025072
Spring4.1新特性——jsonp
https://blog.csdn.net/z69183787/article/details/52141496
Cross-Origin Read Blocking (CORB)
https://blog.csdn.net/weixin_33743880/article/details/91423231
Access-Control-Allow-Origin，跨域
https://www.cnblogs.com/hofmann/p/10750983.html
從HTTP四種POST 提交數據方式，引申JSON與JSONP區別
https://blog.csdn.net/u012129607/article/details/78949866
ajax Json數據格式交互，上傳文件(form-data格式數據)
https://www.cnblogs.com/3sss-ss-s/p/9985294.html