[学习交流] 【西安校区】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>
1
2
3
4
5
6
7
那么这样能不能打印出呢？

<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

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【西安校区】jsonp实现跨域的原理

0 个回复