关于跨域的问题

什么是跨域？

要弄清跨域的问题，首先要了解的是浏览器的同源策略问题。那么，

什么是浏览器的同源策略呢？
同源策略是浏览器的一个安全策略，用来帮助阻挡恶意文档，减少被攻击的危险。

如果两个URL的协议、域名、端口三者完全一致的话，才可以加载src返回的内容。

如果违反了同源策略，将不能进行以下操作：

• Cookie、localStorage、indexDB无法读写（其中可能包含了用户的信息）
• DOM和JS对象无法获得（同源的JS只能获取自己源的DOM树）
• AJAX请求被拦截（访问被阻隔）

跨域，即同源策略中三者其中某一项不能满足相一致，则会产生跨域问题。

如何解决跨域问题？

由于浏览器的同源策略产生的跨域请求，是开发中非常常见的问题。最重要的是如何解决跨域问题呢?

1. JSONP

通过添加script标签，向服务器请求JSON数据，服务器收到之后会将数据放在一个指定的函数中传回来。相当于另通了一个秘密通道用来传送数据。但是只支持get请求，是它的一大缺点。

    // js
    <script src="http://xxx.com/xx?callback=xxxxxx"></script>
    <script>
        function xxxxxx(res) {
            console.log(res)
        }
    </script>
    
    // jQuery Ajax
    $.ajax({
        url: 'xxxx',
        type: 'get',
        dataType: 'jsonp',
        jsonpCallback: 'handleCallback',
        data: {},
    })
    
    // Vue
    this.$http.jsonp('xxxx', {
        jsonp: 'handleCallback'
    }).then(res => {
        console.log(res)
    })

2. CORS

CORS即跨域资源分享（Cross-Origin Resource Sharing），后端在接受请求时，会在响应头上加上’Access-Control-Allow-Origin’，但是忽略了cookie的跨域。

如果需要携带Cookie跨域，前端需要配置

axios.defaults.withCredentials = true // Vue axios请求时是否需要使用凭证

CORS方式分为两种请求方式：

1. 简单请求：HEAD,POST,GET
2. 非简单请求：比如PUT.DELETE之类的特殊请求，或者Content-Type字段的类型是’application/json’

3. Nginx方向代理

在前端项目中配置proxyTable，存入服务端请求域名和Cookie里域名

何为代理呢？

代理即给某个对象提供一个代理对象，类似于中介的代理服务；

正向代理

举例：VPN。
正向代理服务器位于客户端和服务器之间，当客户端向服务端发送请求数据之后，代理服务器将服务器中的数据传送给客户端。

反向代理

客户端将请求发送到反向代理服务器上，代理服务器再去服务器中获取数据，再返回给客户端。相当于是对浏览器的一个“欺骗”过程，在浏览器上明面上是代理服务器的地址，而实际上访问的是目标服务器的地址，浏览器认为是访问的代理服务器的地址（与前端地址一致），则就符合了同源策略的规定。

正向代理和反向代理的区别就是，正向代理，代理的是客户端；反向代理服务，代理的是服务器。

反向代理通过对访问域名端口的更改，实现Nginx反向代理，解决跨域问题。

• listen：用于配置网络监听
• server_name：用于虚拟主机的配置
• location：用于匹配的URL
• proxy_pass：用于设置代理服务器的地址
• index：用于设置网站的默认页

4. postMessage方法

通过postMessage方法，父窗口向子窗口发送信息，可以实现跨文本、多窗口、跨域信息传递

5. document.admin

设置两个页面相同的document.admin，就可以共享cookie

6. websocket协议

该协议可以实现浏览器与服务器全双工通信，但是浏览器一定要支持才行