【Ajax】笔记-同源策略

同源策略(Same-Origin Policy)，是浏览器的一种安全策略

• 同源（即url相同）：协议、域名、端口号 必须完全相同。（请求是来自同一个服务）

• 跨域：违背了同源策略，即跨域。

• ajax请求是遵循同源策略的。
  

• 同源请求例子（在浏览器访问127.0.0.1:9000/server-orign，然后点击按钮发送同源请求）：

• 服务端对同源请求处理：

//3、创建路由规则(request 是请求的报文，response是响应的报文)
app.get('/server-orign', (request, response) => {
    //响应一个页面
    response.sendFile(__dirname + '/同源策略.html');
});
app.get('/data', (request, response) => {
    //响应数据
    response.send('服务端返回的数据');
});

• 客户端html:

const btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
        //console.log('测试');
        //发送ajax请求
        const xhr = new XMLHttpRequest();
        xhr.open('GET', '/data');//同源请求，路径可以简写
        xhr.send();
        xhr.onreadystatechange = function () {
           if(xhr.readyState === 4){
               if(xhr.status >= 200 && xhr.status < 300){
                   console.log(xhr.response);
               }
           }
        }
    }

4. 同源策略的目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

5. 同源策略的限制范围

• 随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。
  // 1. Cookie、LocalStorage 无法读取。不能共享cookie。
  // 2. DOM 无法获得,不能互相操作dom
  // 3. AJAX 请求不能发送。

虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器，那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。
• 这就需要使用到跨域。

解决跨域（JSONP、CORS）

1. JSONP
2. CORS
3. WebSocket