339 同源：同源策略的基本概念，同源策略的目的，同源策略的限制范围

不同源，则跨域

同源策略的基本概念

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>

posted on 2020-02-29 17:07  冲啊！  阅读(541)  评论(0)  编辑  收藏  举报

导航