不同源,则跨域
同源策略的基本概念
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
同源策略:最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。现在浏览器的所谓"同源"指的是"三个相同":
协议相同
域名相同
端口相同
举例来说,http://www.example.com/dir/page.html
这个网址,协议是http://
,域名是www.example.com
,端口是80
(默认端口可以省略),它的同源情况如下:
//http://www.example.com/dir2/other.html:同源
//http://example.com/dir/other.html:不同源(域名不同)
//http://v2.www.example.com/dir/other.html:不同源(域名不同)
//http://www.example.com:81/dir/other.html:不同源(端口不同)
同源策略的目的
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
同源策略的限制范围
随着互联网的发展,“同源策略”越来越严格,目前,如果非同源,以下三种行为都将收到限制。
// 1. Cookie、LocalStorage 无法读取。
// 2. DOM 无法获得。
// 3. AJAX 请求不能发送。
1-不能共享cookie
2-不能互相操作dom
3-不能发送ajax请求
虽然这些限制是很有必要的,但是也给我们日常开发带来不好的影响。比如实际开发过程中,往往都会把服务器端架设到一台甚至是一个集群的服务器中,把客户端页面放到另外一个单独的服务器,那么这时候就会出现不同源的情况,如果我们知道两个网站都是安全的话,我们是希望两个不同源的网站之间可以相互请求数据的。
这就需要使用到跨域 。
<!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>Document</title>
</head>
<body>
<!-- 点击按钮,请求test.php后台程序 -->
<!-- 浏览器会对跨域请求做出限制,跨域不能发送ajax请求 -->
<button>发送请求</button>
<script src="../jquery-1.12.4.min.js"></script>
<script>
$('button').click(function() {
$.ajax({
// www.test.com 和 localhost 都是指向同一个服务器127.0.0.1,通过www.test.com11/02-cross/test.php 访问 http://localhost/11/02-cross/test.php的时候,服务器可以返回数据 “hehe”,但是浏览器拒绝接收,控制台报错,没有输出
url: 'http://localhost/11/02-cross/test.php',
success: function(info) {
console.log(info);
}
})
})
</script>
</body>
</html>