前端基础-Ajax跨域问题的解决方案
第10章 跨域问题的解决方案
10.1 认识jsonp
<script src="ajax.js"> </script>
<script>
$.get('http://127.0.0.1:9000',function(){});
</script>ajax 请求的URL地址，不在当前域名下，就会出现一下错误：
在这里插入图片描述
在这里插入图片描述
同源策略，也叫跨域禁止策略； 阻止从一个域上加载的脚本，获取或操作另一个域上的资源；
但是，公司内部系统的数据交互就无法进行： 公司OA系统 ：http://oa.itcast.cn 公司ERP系统 ：http://erp.itcast.cn 公司ESM系统 ：http://esm.itcast.cn
而Web页面上调用js文件时则不受是否跨域的影响 （不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如script、img、iframe）； src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);
前台代码：
<script src="ajax.js"> </script>
<script>
//提前写好函数，调用函数需要传参
function cb(msg){
console.log(msg);
}
</script>
<!--src加载进来的代码就是一个JS的函数调用,cb函数调用 -->
<script src="http://bbs.com/1.php"></script>后台PHP代码：
$arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4];
$str = json_encode($arr);
//返回字符串，JS代码的函数调用
//要返回的数据作为函数传参传递
echo "cb(".$str.")";修改前后台代码，增加灵活性；
前台代码：
<script src="ajax.js"> </script>
<script>
//提前写好函数，调用函数需要传参
function callback(msg){
console.log(msg);
}
</script>
<!--src加载进来的代码就是一个JS的函数调用,cb函数调用 -->
<!--地址get传参，告知后台函数调用名称 -->
<script src="http://bbs.com/1.php?cb=callback"></script>后台PHP代码：
$arr = ['a'=>1,'b'=>'san','c'=>'wu','d'=>4];
$str = json_encode($arr);
//返回字符串，JS代码的函数调用
//要返回的数据作为函数传参传递
//接受参数拼接，作为函数调用名称
echo $_GET['cb']."($str)";10.2 如何使用JSONP
<body>
<input type="button" id="btu" value="点击">
</body>
<script src="ajax.js"> </script>
<script>
//提前写好函数，调用函数需要传参
function callback(msg){
console.log(msg);
}
//动态添加script标签及src属性
$('btu').onclick = function(){
var sc = document.createElement('script');
sc.src = "http://bbs.com/2.php?cb=callback";
document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>就是在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理； 在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系； 为了便于使用及交流，逐渐形成了一种 非正式传输协议，人们把它称作 JSONP ；
该协议的一个要点就是允许用户传递一个callback参数给服务端， 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据， 这样客户端就可以随意定制自己的函数来自动处理返回数据了。
10.3 跨域资源共享（ CORS）机制
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
php代码中添加一下header头声明:
Access-Control-Allow-Origin:* //域名，* 允许所有
php:(服务端代码)
<?php
header('Access-Control-Allow-Origin:http://localhost');
echo 1 本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录