浏览器的同源策略
URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。
三者有一个不同则会产生跨域。
跨域的几种解决方案
1,通过后台通过代理获取其它域名下的数据
2,CORS
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing),它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
Access-Control-Allow-Origin 该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求
3,JSONP
JSONP和JSON不一样,它并不是一种数据格式。而一种JavaScript实现跨域数据访问的方式。
JSONP跨域的原理
在浏览器中,script、img、iframe、link等标签都可以加载跨域资源,而不受同源限制。
而Jsonp就是利用script标签可以加载外部标签这一特性来实现跨域请求。下面看一个小demo。
数据库如图:
php代码
<?php
class Lists {
public $id;
public $name;
public $url;
public $country;
}
function connect() {
$localhost = 'localhost';
$username = 'root';
$password = 'root';
$database = '10086q';
$con = mysqli_connect($localhost,$username,$password,$database);
if (mysqli_connect_error($con)) {
echo "连接错误".mysqli_connect_error();
return null;
}
return $con;
}
$conn = connect();
$sql = 'select * from websites';
$res = mysqli_query($conn,$sql);
$data = array();
if ($res->num_rows > 0) {
while ($row = $res->fetch_assoc()) {
$list = new Lists();
$list->id = $row['name'];
$list->name = $row['name'];
$list->url = $row['url'];
$list->country = $row['country'];
array_push($data,$list);
}
} else {
echo "没有数据";
}
//判断是否为跨域
if (isset($_REQUEST['callback'])) {
$callback = $_REQUEST['callback'];
$str = json_encode($data);
echo $callback.'('.$str.')';
} else {
echo json_encode($data);
}
?>
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('get','http://127.0.0.1:83/test/0513/cross_domain/jsonp.php',true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
console.log(data);
console.log(typeof data);
data = JSON.parse(data);
console.log(data);
console.log(typeof data);
}
}
</script>
</html>
上面是用http协议请求的代码,浏览器显示如图:
前端代码2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function ojson(data) {
console.log(data);
}
</script>
<script src="http://127.0.0.1:83/test/0513/cross_domain/jsonp.php?callback=ojson" type="text/javascript" charset="utf-8"></script>
</html>
这次用的是file协议,浏览器显示如图:
请求同一个api接口,file协议也能够获取到数据,只是要预定义一个全局的回调函数,并将函数名作为参数传给服务端。而服务端的代码则需要通过判断是否有回调来执行对应的操作。服务端返回的是一个回调函数的执行。
//isset可以用来判断是否为跨域
if (isset($_REQUEST['callback'])) {
$callback = $_REQUEST['callback'];
$str = json_encode($data);
//输出用获取的回调函数操作的数据
echo $callback.'('.$str.')';
} else {
echo json_encode($data);
}