同源策略与跨域

前言：最近业务上前端同学多次联系说访问腾讯云cos资源的时候因为跨域的问题访问不到。大致看了下腾讯云关于设置跨域访问的教程，按照前端同学给的域名等选项就给配了，而且测试下来也是好的。但是呢一直不知道什么是跨域这里就做一个简单的学习记录。

一、同源策略

        同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。如果缺少了同源策略浏览器的安全使用会受到很大的影响。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

1、同源的定义

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

如下表给出了相对http://www.example.com/dir/page.html的同源检测示例：

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	失败	域名不同

同源策略目的就是为了保证用户信息的安全，防止恶意的网站窃取用户数据。如果网页之间不满足“同源”的要求，那么它们之间：

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

2、同源策略作用举例

        下面举一个例子说明针对接口的请求没有同源策略会怎么样？

        cookie大家应该知道，一般用来处理登录等场景，目的是让服务端知道谁发出的这次请求。如果你请求了接口进行登录，服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的