# 同源策略
同源策略就是浏览器最基本的安全规则
## 什么是同源策略
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
## url地址的组成
协议 + 域名 + 端口(不写就是80) + path + hash + query
协议 + 域名 + 端口 有任意一个不同就会产生跨域
## 常见的协议
http:// 基础的http协议
https:// 比http更加安全 (证书，公钥,私钥)
ws:// scoket及时通信
ftp:// 文件传输协议
sftp://
## 同源策略的目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？
很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。
由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。
网址：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
##限制范围
随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
##什么时候需要解决跨域
1.环境: 在前后端分离的项目中，前端开发前端工程 后端开发后端的接口，但是前后端需要接口联调,接口运行在后端的电脑(或者测试服务器上),前端在本地启动本地服务(localtion),需要通过ajax请求后端提供的接口地址(IP,域名),那么这个时候就需要解决跨域的问题(开发环境才会有跨域,生产环境不存在跨域问题)
2.开放api: 那么需要请求开放api(如果没有处理)也会遇到跨域的问题
3.小程序的开发: 小程序代码基于微信运行在客户端,接口是在服务器,那么这个时候请求接口就会遇到跨域的问题
4.子域名: 比如: www.baidu.com 请求api.baidu.com 这个时候无论是在本地，还部署到线上之后都会有跨域的问题
##解决跨域的方法
*jsonp
*代理
*cors
###jsonp
利用静态文件资源不跨域的特性解决跨域的问题
特性:因为浏览器的同源策略只是限制了ajax,并没有限制其他资源的请求,所以可以利用静态资源不跨域多的特性
#### 实现：
1.需要js动态生成script标签,并且赋值src为接口地址
2.动态创建一个函数添加到window上
3.将动态创建的函数的名称拼接到url地址的后面
4.服务端接收到请求,并且获取函数的名称
5.服务器返回正确的js语法,函数名(参数)
####优点:
1.没有兼容问题
2.能解决跨域
####缺点:
1.只有get请求
2.并不是真的ajax请求
3.不安全
####适用场景:
以前比较常用的一种跨域解决方案,或者兼容的开放api
####实现:
###代理
可以使用代理的方式解决跨域问题,代理分为(正向代理,反向代理),利用服务器不跨域的特性解决
###实现
1.webpack-dev-server 的proxy属性(正向代理)
proxy:{
'/xxxx':{
target:'http://location:3000',
changeOrigin：true，
pathRewrite:{'^/xxxx':''}
}
}
2.nginx 可以实现 (反向代理)
###cors跨域资源共享
利用了w3c的新标准
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
###场景
1.网页
2.开发环境的时候 (正向代理)
####简介
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
####实例
####使用场景
1.多个子域名
2.小程序