跨域基本概念:
同源:
协议名:http
地址一样(目录相同)
端口号:默认80
上述三个条件一样则为同源
不同源: 协议、地址、端口号三者中有一个不一样
跨域:
不同源的网站之间互相发送请求
浏览器默认是限制了跨域访问
虽然被限制了,但是在开发中不可避免的出现跨域访问
cors解决:cross origin resource sharing(要html5才支持)
主要出现在ajax的的请求行里
xhr.open('get', './data.php');//当访问当前路径时不会出现跨域问题
如果把请求路径改为以本机ip地址为首的绝对路径,如下地址:
xhr.open('get','http://192.168.1.109/php8-20/jsonp/data.php');
同样以127.0.0.1去请求路径就会出现跨域问题,如图:
跨域问题:XMLHttpRequest cannot load http://192.168.1.109/php8-20/jsonp/data.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.
错误里提示在请求的data.php文件里"No 'Access-Control-Allow-Origin' is header present on the requested resource"
也就是data.php文件出了问题,没有在文件里添加"访问控制允许同源",要求在php的header里添加('Access-Control-Allow-Origin'),如下:
//设置允许跨域访问
header('Access-Control-Allow-Origin:*');//后面的' * '号为通配符表示允许所有域名跨域访问
echo 'console.log("你来了呀")';
这时服务器就可以返回数据了,如图:
jsonp解决:
Jsonp原理:
1.利用script标签的src属性支持跨域获取资源
2.script的src请求路径上用get请求的方式?拼接一个方法名发送到服务器
3. 服务器接收到请求后,用get获取方法名,并且用字符串拼接
的方法传入一个参数返回给浏览器
4. 浏览器把返回的数据当js解析
用以上jsonp方法没有出现跨域问题并且服务器获取到了数据
jsonp解决主要借助了script标签src属性的方法,看下面html代码:
data.html:
<!DOCTYPE html>
<html>
<head>
<title>jsonp</title>
<meta charset="UTF-8" />
<style></style>
</head>
<body>
<input type="button" value="跨域访问"/>
<script>
function callback(data){
console.log(data);
}
</script>
<script src="http://192.168.1.109/php8-20/jsonp/data.php?success=callback"></script>
</body>
</html>
php代码:
data.php
<?php
$backData = $_GET['success'];
把数据拼接到函数名后面
echo $backData.'({"name":"哈哈","friend":"嘿嘿"})';
?>
输出结果如下图:
jsonp按描述的方法正常的输出,也可以解决跨域问题,浏览器成功输出了传入的对象