跨域&同源

 

目录

 

同源

           同源策略

跨域

---

同源

地址里面的协议域名和端口号，相同为同源

同源策略是浏览器安全功能，不同于源客户端没有明确授权时不能读写对方资源，a.com下的js脚本用a.jax读取b.com的数据会报错

判断条件

1. 协议是否相同（http、https、file）
2. 域名是否相同（www.xxx.com 127.0.0.1）
3. 端口（0~65535）http默认的端口号是80（可以省略），https默认端口是443 ， MySQL默认的端口是3306
4. URL                                                                            结果         原因
   http://www.example.com/dir2/other.html                    成功     协议、域名、端口相同
   http://www.example.com/dir/inner/another.html         成功      协议、域名、端口相同
   https://www.example.com/secure.html                      失败      协议不同 ( HTTPS )
   http://www.example.com:81/dir/etc.html                    失败      端口不同 ( 81 )
   http://news.example.com/dir/other.html                     失败      域名不同

同源策略

同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。如果缺少了同源策略浏览器的安全使用会受到很大的影响。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略目的就是为了保证用户信息的安全，防止恶意的网站窃取用户数据。如果网页之间不满足“同源”的要求，那么它们之间：

(1)不能共享Cookie、LocalStorage、IndexDB
(2)不能获取DOM
(3)AJAX请求不能发

 同源策略，它是由Netscape提出的一个著名的安全策略。所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
即检查是否同源，只有和百度同源的脚本才会被执行。 
如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

用户第一次登陆网站A

 第二次登陆网站A

同源策略是针对浏览器的，如果没有同源策略，用户登录网站A，再去网站B，网站B就会读取A的cookie，再用这个cookie伪造成用户登陆A网站 

 而同源策略就会阻止这种行为，当网站B向网站A请求cookie时，浏览器会检测B和A是否同源，如果非同源就会拒绝该请求，B无法获取A网站的cookie

跨域

协议、域名、端口号有一个不同就是跨域

针对JavaScript和Ajax，html本身没有跨域

在express项目中解决跨域问题的办法

安装cros模块：npm install cros

在app.js文件中配置cros

app.use('cros')

导入：在app创建之前导入

使用：在app创建之后，在配置路由路径之前

跨域访问限制的作用流程:

1.浏览器发送跨域请求
2、 接收response数据
3、 检查响应头
（1）如果响应头中没有允许跨域访问的配置，则不加载，并报出响应异常
（2）如果响应头中有允许跨域访问的设置，正常加载数据

即，同源策略并不是浏览器不让请求发出去、或者后端拒绝返回数据。实际情况是请求正常发出去了，后端也正常相应了，只不过数据到了浏览器后浏览器不去作用加载而是丢弃了。
解决