黑马程序员技术交流社区
标题:
【西安校区】jsonp实现跨域的原理
[打印本页]
作者:
逆风TO
时间:
2019-9-19 09:19
标题:
【西安校区】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
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2