大家好,今天我们学习了js的跨域请求的解决方案,由于JS中存在同源策略,当请求不同协议名,不同端口号、不同主机名下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理!
方案一、后台PHP进行设置,
前台无需任何设置,在后台被请求的PHP文件中,写入一条header
header("Access-Control-Allow-Origin:*");
表示允许那些域名请求这个PHP文件*表示所有域名都允许
这是最佳的解决方案,因为是在后台进行设置,不对外公开,所以更加安全,
方案二、使用src请求+JSONP实现跨域
* ①拥有src属性的标签自带跨域功能,所有可以使用script标签的src属性请求后台数据。
* <script src="http://127.0.0.1/json/php" type="text/javascript" charset="utf-8"> </ script>
* ②由于src在加载数据成功后,会直接将加载内容放入到script标签中,
* 所以后台直接返回JSON字符串将不能再script标签中解析。。
* 因此后台应该返回给前台一个回调函数名,并将json字符串作为参数调用
* 从后台PHP文件中国返回:echo "callBack({$json})";
③前台接收到返回的回调函数时,回调函数将直接在script标签中调用,因此需要声明这样一个回调函数,作为请求成功的回调。
eg:
$.ajax({
method:"post",
url:"http://127.0.0.1/json/php",
dataType:"jsonp",
success:function(data){
console.log(data);
console.log($str[1].name)
} });
方案三、JQuery的AJax实现JSONP
①在ajax请求是,设置datatype为"jsonp"
②后台返回是,依然需要返回回调函数。但是,ajax在发送请求是惠默认使用get请求回调函数名发给后台,后台可以使用echo $_GET['callback']取出回调函数名,这样前台可以使用ajax的success函数作为成功的回调。
echo "{$_GET['callback']}({$str})";
③后台返回以后,Ajax依然可以使用success作为成功的回调函数;
success:function(data){}
当然后台也可以随便返回一个回调函数名,echo"callBack({$str})",
前台只要请求成功,就会自动调用这个函数。类似以第二条的②③步
<script src="http://127.0.0.1/json/php" type="text/javascript" charset="utf-8">