jsonp实现跨域的原理

1 概述

jsonp能够实现跨域，那么其原理是什么呢？
简单点说，就是利用script标签，因为script标签是不存在跨域限制的。

2 详述

假设目前有两个文件，一个前端html，一个后端文件php，所在位置分别为：
html: http://localhost/jsonp/jsonp.html
php: http://127.0.0.1/jsonp/data.php
要想前端直接访问此后端的数据，直接使用ajsx或者fetch按照上述url访问php肯定会出现跨域的问题，如下所示；

<script>
    // fetch
    fetch("http://127.0.0.1/jsonp/data.php").then((res)=>{
   		console.log(res);  // 直接就显示了跨域问题
   	})
</script>

那么现在一步一步的来解决:
我们都知道，直接调用函数肯定会打印出结果，如下

<script>
    function foo(data){
        console.log(data);
    }
    foo({"name":"xiaoming"})
    // 这打印出结果{"name":"xiaoming"}
</script>

那么这样能不能打印出呢？

<script>
    function foo(data){
        console.log(data);
    }
</script>
<script>
    foo({"name":"xiaoming"})
</script>
 // 当然也是可以得到结果的

当然也是可以得到结果的！
那么接下来这样能不能打印出结果呢？

<script>
    function foo(data){
        console.log(data);
    }
</script>
<script src="http://127.0.0.1/jsonp/data.js"></script>
// 也是可以的

这也是可以的，就好比如我们引用了一个在线的文件；
注意，理解一下，<script src=“http://127.0.0.1/jsonp/data.js”></script>这里返回的结果是 foo({“name”:“xiaoming”})是吧，那么也就是说只要能够返回 foo({“name”:“xiaoming”})，就可以实现我们想要的结果，那么是不是同样在php文件中，只要返回 foo({“name”:“xiaoming”})，是不是就可以实现了呢？

<script>
    function foo(data){
        console.log(data);
    }
</script>
<script src="http://127.0.0.1/jsonp/data.php"></script>
// 也是可以的

其中，php代码为：

<?php
    echo 'foo({"name":"xiaoming"})';
?>

最终打印的结果{“name”:“xiaoming”}；
是不是就实现了跨域访问呢？
这其实也是jquery中$.getJSON的基本原理，只是$.getJSON实现了动态的函数名！

3 JSONP 实现跨域的缺点

1）对方网站必须提供的是一个jsonp格式的接口
2）只能get请求

4 手动实现$.getJSON

https://blog.csdn.net/qq_41800366/article/details/100900881