我们先来回顾一下CORS是怎么解决跨域问题的：因为浏览器的校验没有通过所以会产生跨域问题，校验的规则就是CORS规则，所以我们要做的无非就是让它通过校验。但是在没有CORS的年代，比如一些老的项目，开发的时候还没有CORS这个方案，那么Ajax跨域是一定会引发跨域问题的，那么那时候都怎么解决跨域问题呢？
我们之前说过，在同源策略里面跨域的情况是很多的，不仅仅是Ajax，请求一个图片、一个JS、一个CSS都会发生跨域，不过浏览器对标签产生的跨域限制比较小。JSONP这种方案呢就是充分利用了这一点。
JSONP方案怎么做的
根据浏览器对标签产生的跨域限制比较小这一点，JSONP方案决定不用Ajax了，所以JSONP方案和Ajax没有任何关系。JSONP方案首先会在JS里面准备好一个接收函数。
function callback(resp) {}
然后会创建一个script标签来发送这个跨域请求，在script标签的src属性里面填写跨域的地址，所以说相当于使用标签的形式来进行跨域请求。
<script src="跨域地址"></script>
由于浏览器对标签的跨域限制比较小，所以说能够正常的请求，正常的响应，并且能够拿到这个响应结果，而且还能把这个响应结果当成一个JS来执行，这就要求服务器要给我响应一段JS代码（这就要跟后端进行商量） ，这段JS代码里面会调用我们前面准备好的接收函数，然后把我们需要的数据作为参数给我们传过来，然后接收函数就会执行，这样我们就能在函数里获取到我们需要的数据然后对其操作。
具体举个例子，在这之前我们要提前模拟数据库好返回的数据，是一段JS代码：
callback({ name: "于家宝", age: 18, obj: "前端开发" });
然后是发送请求代码：
<body>
<button>点击获取数据</button>
</body>
<script>
// 提前准备好的接收函数
function callback(resp) {
console.log(resp);
}
function request(url) {
// 创建一个script标签
const script = document.createElement("script");
// 给script标签的url属性添加请求接口
script.url = url;
// 请求完成以后给这个script标签删除
script.onload = function () {
script.remove();
};
document.body.appendChild(script);
}
document.querySelector("button").onclick = function () {
request("跨域地址");
// 其实返回的结果就是 callback({ name: "于家宝", age: 18, obj: "前端开发" });
};
</script>
因为浏览器对标签发送的跨域限制比较小，所以我们是能够正常获取数据的，这样就完美解决了跨域问题。
需要注意的是这里发送请求是使用标签发送请求，不是Ajax发送请求，在后台网络是看不到的。
