理解同源策略和解决跨域问题

1、什么是同源策略

简单来说，就是域名、协议、端口相同，即为同源。同源策略是一种浏览器安全策略，规定JavaScript能读取哪些web网站的内容，从而保护网站的数据不被其他网站读取。保护用户在使用浏览器访问网站时，B网站不能读取用户存储在A网站的数据。

2、同源策略的目的

举个简单的例子：

当我们使用浏览器去访问A网站时，如果是第一次登录需要输入账号密码，为了方便下次访问，而不需要输入账号密码，服务端会给我们返回一个凭证——cookie，当前浏览器就会将这个凭证存起来，当我们下次再用这个浏览器去访问A网站时，A网站就会先向浏览器请求一下是否有这个凭证，如果存在则不需要再次登录。

注意：cookie只存储在当前浏览器，换了浏览器之后就需要重新输入账号密码

用户小黑第一次登录A网站：

用户小黑第二次登录A网站：（浏览器存在A网站的cookie）

同源策略是针对浏览器的，想象一下如果没有同源策略，当用户小黑登录了A网站，再去访问B网站，B网站就可以读取A网站的cookie，再利用这个cookie伪造用户去登录A网站。

如果B网站是一个坏人李明搭建的，那么李明就可以用B网站获取到的cookie伪造小黑的身份登录A网站，从而盗取小黑的存在A网站的信息数据，甚至通过小黑身份去搞破坏。就跟qq微信被盗骗一样

而同源策略就会去阻止这种行为，当B网站向浏览器请求A网站的cookie时，浏览器会检测B网站和A网站是否同源（域名、协议、端口相同），如果非同源，就会拒绝该请求，使B网站无法获取A网站的cookie

3、判断是否同源

注意：localhost和127.0.0.1虽然都指向本机，但也属于非同源

4、跨域问题

前面说到，如果非同源就无法进行数据请求，那如果A网站和B网站非同源，却偏偏要请求数据，该怎么办呢？

在前后端分离的项目中，都会出现跨域问题

前端部署在80端口，是http://1.1.1.1:80   A服务器

后端部署在81端口，是http://1.1.1.1:81   B服务器

解决跨域的问题有好几种，不过原理都很相似，采用代理的方法。

只要A和B都跟代理服务器实现了某种接口，使得A和代理服务器、B和代理服务器都不存在跨域，

那么只要A在请求B的数据时，将请求发给代理服务器，代理服务器就会将A的请求发给B，再将B返回的数据发给A，这样就解决了跨域的请求。

 在实际应用中，跨域的解决办法会有所不同，怎么简单怎么来，哪种最安全就选哪种。

 比如使用nginx时就可以选择nginx反向代理解决跨域问题。。。

又比如vue的axios，可以选择在前端服务器配置反向代理解决跨域问题。。。