【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