同源与跨域策略

同源策略

什么是同源

同源策略：SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到攻击。

所谓"同源"指的是"三个相同"：

• 协议相同
• 域名相同
• 端口相同

例如：

判断与http://www.example.com:80/dir/other.html的同源：

• http://www.example.com:80/dir2/other.html 同源（协议、域名、端口相同）

• https://www.example.com:80/dir/other.html 不同源(协议不同)

• http://v2.www.example.com:80/dir/other.html：不同源（域名不同）

• http://www.example.com:81/dir/other.html：不同源（端口不同）

在客户请求页面时，页面需要通过服务器端的渲染后才能得到

同源策略的目的

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

同源策略的限制范围

随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。

• Cookie、LocalStorage 和 IndexDB 无法读取。
• DOM 无法获得。
• AJAX 请求在浏览器端有跨域限制

跨域

什么是跨域

因为存在浏览器同源策略，所以才会有跨域问题。

跨域：指的是从一个域名去请求另外一个域名的资源。即跨域名请求！跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。
严格来说，只要客户端和服务器在协议，域名，端口有任何一个的不同，就被当作是跨域。

node中的跨域

在node.js的服务器代码中，通常添加这几句来实现跨域：

    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
    res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.setHeader("X-Powered-By","3.2.1");
    res.setHeader("Content-Type", "application/json;charset=utf-8");

如果不进行跨域，就会出现如下错误：

express中的跨域

（1）安装跨域模块：cors

npm install cors

（2）在app.js文件中引入cors模块

CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C
标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。只要服务器实现了 CORS 接口，就可以跨源通信。

（3）在app.js文件中使用跨域模块

从而实现前后端分离。

注意：
在express中路由和跨域是需要有先后顺序的，跨域模块的导入和使用应该在导入并应用路由之前，否则将出现错误。