什么是同源策略呢？
就是拥有相同的协议、域名、端口的统一资源定位符(URL---Uniform Resource Locator) .
例如
http://www.a.com/index.html
http://www.a.com/reg.html (同源)
http://1s.a.com/reg.htm(不同源 域名不同)
https://www.a.com/index.htm(不同源 协议不同)
http://www.a.com:8080/reg.html (不同源 端口不一致)
什么是非同源策略呢？
a.com/index.html
可以引用b.com/main.js
可以引用b.com/style.css
可以引用b.com/logo.bng
但是a.com/main.js不可以访问b.com中的资源
什么是跨域？跨域有几种实现形式
我们知道，由于同源策略的原因，请求和获取数据只能在同源策略内完成。但是假如我们要想要完成非同源之间数据请求和交换，我们这就叫跨域。
同源策略.png
跨域的实现常见有三种形式
1. 降域
2. jsonP
3. cors
降域
让不同源的域名变成同源的域名。降域之后可以任意的访问数据和方法。
缺点：只能针对IFRAME形式的跨域
同样的后缀域名
需要在引入页面和iframe页面同时设置
document.domain = '顶级域名';
TOP页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>同源策略</title>
</head>
<body>
Father
<iframe src="//a.com:8888/index2.html" frameborder="0"></iframe>
<!-- <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> -->
<!-- <script src="main.js"></script> -->
<script>
document.domain="a.com";
setTimeout(function(){
var iframe = window.frames[0];
console.log(iframe.window.name);
},2000)
</script>
</body>
</html>
引入页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>child</title>
</head>
<body>
child
<script>
document.domain="a.com";
window.name ="index2";
</script>
</body>
</html>
jsonp
就是json with padding。通过动态设置<script src="//b.com/main.js?callback=CallBack"></script> 从而达到跨域的请求。并提供一个回调参数用来接收数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jsonp</title>
</head>
<body>
Father
<!-- <iframe src="//a.com:8888/index2.html" frameborder="0"></iframe> -->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="main.js"></script> -->
<script>
// document.domain="a.com";
// setTimeout(function(){
// var iframe = window.frames[0];
// console.log(iframe.window.name);
// },2000)
$(function(){
$.ajax({
url: '//b.com/index.php',
type: 'get',
dataType: 'jsonp',
jsonp:'callback',
success:function(data){
console.log(data);
}
})
})
</script>
</body>
</html>
<?php
$data = '{"name":"douliantao"}';
echo $_GET['callback'].'('.$data.')';
cors
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
a.com
$(function(){
$.ajax({
url:'http://b.com/index.php',
type:'get',
success:function(ret){
console.log(ret);
}
})
})
b.com
header("Access-Control-Allow-Origin:http://a.com");
$data = 'douliantao';
echo $data;
网友评论