同源策略：浏览器的安全策略，指协议、域名、端口完全相同。同源或不同源指的是两个地址间的关系。
默认，只有同源的地址之间才能相互进行ajax请求。不同源之间的请求称为跨域请求。
jsonp解决跨域：https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/
jsonp：json with padding的缩写，是一种借助<script>标签发送跨域请求的技术。
jsonp原理：通过<script>标签发送跨域请求，请求响应一段javascript代码，
服务端响应的这一段javascript代码是：一个方法名，包裹一个json对象（所以叫json with padding）。
浏览器接收到javascript代码后立即执行，相当于调用了一个函数。所以，我们需要预先定义好这个函数。
jsonp操作1：
<script type="text/javascript">
// 本地定义一个函数
function fun1(data) {
alert(data.name);
}
</script>
<script type="text/javascript" src="http://其他域名/js/json.js"></script>
<script type="text/javascript" src="http://其他域名/js/json.js"></script>这个标签作用：
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。src指向的内容会嵌入到文档中当前标签所在的位置。
这个标签的作用也就相当于：
<script type="text/javascript">
// 这里是src="http://其他域名/js/json.js响应的内容
fun1({"name":"张三","age":10});
<script>
浏览器接收到javascript代码后立即执行，调用方法 fun1({"name":"张三","age":10});
所以，上面代码的本质是：
<script type="text/javascript">
// 本地定义一个函数
function fun1(data) {
alert(data.name);
}
</script>
<script type="text/javascript">
fun1({"name":"张三","age":10});
</script>
jsonp操作2：
<script type="text/javascript">
function fun1(data) {
alert(data.name + "-" + data.age);
}
var script = document.createElement("script");
script.src = "http://localhost/Demo01/jsonResult?jsonp=fun1";
document.body.appendChild(script);
</script>
通过javascript代码，动态发送跨域请求，"?jsonp=fun1"表示回调函数名为fun1，服务端响应的数据格式为：fun1(json对象);
服务端代码：
@RequestMapping("/jsonResult")
@ResponseBody
public String fun1(String jsonp) {
if(jsonp.length() > 0) { // jsonp请求
return jsonp + "(" + "{\"name\":\"张三\",\"age\":10}" + ")";
} else {
return "{\"name\":\"张三\",\"age\":10}";
}
}
原文：https://www.cnblogs.com/xy-ouyang/p/10452796.html