天天看点

跨域请求的几种解决方法

跨域请求

跨域请求:两个不同域名之间的通讯。

Ajax受到浏览器的限制(安全性考虑)不允许跨域通信。

<script>
var req=new XMLHttpRequest();
req.open('get','http://phpmyadmin.com/test/home.js');   //报错
req.send();
</script>
           
跨域请求的几种解决方法

默认情况下浏览器采用同源策略:一个域下面的JS只能请求同一个域下面的文档内容,不能跨域请求。

1.1 解决方法一:src属性

使用标签的src属性,src属性是没有同源的限制的

<img src='http://www.baidu.com/tu1.jpg' />
<script src='http://phpmyadmin.com/test/home.js'></script>
           

1.2 解决方法二:PHP代理

跨域请求的几种解决方法

A客户端

<script>
var req=new XMLHttpRequest();
req.open('post','./6-demo.php');
req.onreadystatechange=function(){
	if(req.readyState==4 && req.status==200){
		alert(req.responseText);
	}
}
req.send();
</script>
           

A服务器

<?php
echo file_get_contents('http://phpmyadmin.com/test/test.php');
           

B服务器

<?php
echo '锄禾日当午';
           

小结:客户端有同源策略,服务器没有同源策略,我们可以使用服务器作为代理去跨域请求。

A服务器(

http://www.php.com

)

B服务器(

http://phpmyadmin.com

1.3 解决方法三:jsonp

jsonp=json+动态script。是一种非官方协议,为了解决JS的跨域请求

通过

<script>

的src属性引入跨域文件从而携带数据实现了数据的跨域访问。

代码实现

客户端代码(

www.php.com

<body>
<script>
function fun(data){
	alert(data);
}
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		var script=document.createElement('script');
		script.src='http://phpmyadmin.com/test/test.php?fn=fun'; //动态添加script的src属性
		document.body.appendChild(script);
	}
}
</script>
<input type="button" value="确定" id='btn'>
</body>
           

PHP代码(

http://phpmyadmin.com

<?php
$stu=array('tom','berry');
$data=json_encode($stu);
echo "{$_GET['fn']}($data)";    //拼接函数的调用
           

小结:

1、通过动态的添加script的src属性

2、传递的函数名和客户端定义的函数名要一致

3、跨域的服务器返回的是调用函数的形式

思考:json与jsonp的区别?

答: json是一种通用的数据交换格式,主要实现数据的传输与储存。

jsonp是一种非官方协议,为了解决JS的跨域请求问题。
           

1.4 解决方法四:CORS实现跨域

设置允许接受的源

CORS(Cross-Origin Resource Sharing)跨源资源共享:服务器在响应头中告知浏览器那些域请求限制,哪些域请求接受。

客户端代码(

http://www.php.com

<body>
<script>
window.onload=function(){
	document.getElementById('btn').onclick=function(){
		var req=new XMLHttpRequest();
		req.open('post','http://phpmyadmin.com/test/test.php');
		req.onreadystatechange=function(){
			if(req.readyState==4)
				alert(req.responseText);
		}
		req.send()
	}
}
</script>
<input type="button" value="确定" id='btn'>
</body>
           

服务器端代码(

http://phpmyadmin.com

header('Access-Control-Allow-Origin:*');    //允许所有的域名访问
echo 'i am a boy';
           

继续阅读