浏览器的同源策略及如何解决跨域

一、什么是同源策略：
如果两个url的协议、域名、端口号都相同，那么可以说这两个url是同源的；浏览器默认两个相同源之间是可以互相访问资源和操作DOM的。如果是两个不同源之间进行资源访问，浏览器会有一套基础的安全策略进行限制，这个策略就是同源策略。

二、具体来讲，同源策略体现在DOM、web数据、网络三个方面。
第一个DOM方面：可以通过JavaScript脚本来操作同源页面的DOM元素。同源策略限制不同源站点之间JavaScript脚本对当前DOM对象的读写操作

第二web数据方面：同源策略限制了不同源站点访问当前站点的Cookie、localStorage等数据。

第三网络方面：同源策略限制了通过XMLHttpRequest等方式将当前站点的内容发送给不同源的站点。

1、页面中嵌入第三方资源，
因为浏览器没办法判断哪个资源能够加载，哪个资源不能加载，所以这种方式很容易被引入恶意的第三方脚本，将页面的的敏感数据，如 Cookie、IndexDB、LoacalStorage 等数据通过 XSS 的手段发送给服务器。
为了解决XSS攻击，浏览器引入了内容安全策略，成为CSP，CSP的核心思想就是让服务器决定浏览器哪些资源能够加载，让服务器决定哪些内联JavaScript能够执行，哪些不能执行。

2、跨资源共享和跨文档消息机制
（1）跨资源共享
（2）跨文档消息机制，由于不同源之间的DOM没法互相进行操作，所以引入了postMessage来进行不同源DOM的通信。

解决跨域的几种方式：原链接
1、JSONP
利用

2、cors
这种方法需要服务器和客户端同时支持；
浏览器是自动进行cors通信的，而实现cors通信的关键是服务器需要支持cors，需要在服务端设置 access-control-allow-origin开启 CORS，这个表示哪些域名可以访问资源。
这里不过多赘述，想了解更多可以看原链接，这个只是供我自己复习使用。

3、使用postMessage
页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

4、websocket
websocket和http都是应用层的协议，tcp是传输层的协议，所以websocket和http都是基于tcp进行数据传输的，但是websocket和http不同的是，websocket是支持双向通信的协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据

5、使用node中间件代理
因为同源策略是浏览器的基本的安全策略，如果是服务器向服务器发送请求就可以不遵循同源策略了
代理服务器需要做的事情：
（1）接受客户端请求 。
（2）将请求 转发给服务器。
（3）拿到服务器 响应 数据。
（4）将 响应 转发给客户端。

6、Nginx反向代理
实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。
使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。
实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

// proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

知识普及：正向代理和反向代理的区别，一句话就是：如果我们客户端自己用，就是正向代理。如果实在服务器用，我们用户无感知，就是反向代理。
正向代理：

反向代理：