跨域

同源策略

同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指“协议，域名，端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略的限制内容有：

• Cookie、LocalStorage、IndexedDB 等存储性内容
• DOM 节点
• AJAX 请求发送后，结果被浏览器拦截了

跨域就是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址同源。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：

需要注意三点：

• 如果是协议和端口造成的跨域问题“前台”是无能为力的。
• 在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配。
• 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会？因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

下面来说说有哪些跨域解决方案。

jsonp

利用script标签（类似的标签还有 iframe、img ，他们都含有 src属性，link 标签借助 href 也可跨域）可跨域的特点，在跨域脚本中可以直接回调当前脚本的函数。

jsonp 和 Ajax 相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但 Ajax 属于同源策略，jsonp 属于非同源策略（跨域请求）。

jsonp 优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持 get 方法具有局限性，不安全可能会遭受 XSS 攻击，而且严重依赖后端的协助。

jsonp实现原理：

• 声明一个回调函数，其函数名(如 show )当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的 data )。
• 创建一个 script 标签，把那个跨域的 API 数据接口地址，赋值给script 的 src ,还要在这个地址中向服务器传递该函数名（可以通过问号传参：?callback=show）。
• 服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成一个字符串，例如：传递进去的函数名是show ，它准备好的数据是 show(‘I love you’)。
• 最后服务器把准备的数据通过 HTTP 协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。

CORS

服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制，该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。通过CORS解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

• 只要同时满足以下两大条件，就属于简单请求：
  条件1：使用下列方法之一：GET HEAD POST
  条件2：Content-Type 的值仅限于下列三者之一：
  text/plain
  multipart/form-data
  application/x-www-form-urlencoded
  请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
• 不符合以上条件的请求就是复杂请求了。复杂请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为”预检”请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。例如我们用PUT向后台请求时，属于复杂请求。

和 jsonp 一样，CORS 也严重依赖后端的协助。

postMessage

postMessage 是 HTML5 XMLHttpRequest Level 2 中的API，且是为数不多可以跨域操作的 window 属性之一，它可用于解决以下方面的问题：

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

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

otherWindow.postMessage(message, targetOrigin, [transfer]);

• message: 将要发送到其他 window 的数据。
• targetOrigin：通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串”*”（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送，只有三者完全匹配，消息才会被发送。
• transfer(可选)：是一串和 message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

webSocket

Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。原生 WebSocket API 使用起来不太方便，我们使用Socket.io，它很好地封装了 webSocket 接口，提供了更简单、灵活的接口，也对不支持 webSocket 的浏览器提供了向下兼容。

Node中间件正向代理

同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。

代理服务器，需要做以下几个步骤：

• 接受客户端请求
• 将请求转发给服务器
• 拿到服务器响应数据
• 将响应转发给客户端

nginx反向代理

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

正向代理和反向代理的比较：

• 从用途上来讲：正向代理的典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。正向代理还可以使用缓冲特性减少网络使用率。反向代理的典型用途是为后端的多台服务器提供负载平衡，或为后端较慢的服务器提供缓冲服务。
• 从安全性来讲：正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。
• 从使用方来看：正向代理是浏览器端进行配置的，与服务器端无关，甚至可以对服务端隐藏。反向代理是服务器端配置的，对浏览器端是透明的。

window.name + iframe

window.name属性的独特之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。通过iframe 的 src 属性由外域转向本地域，跨域数据即由 iframe 的window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

window.location.hash + iframe

a.html 欲与 c.html 跨域相互通信，通过中间页 b.html 来实现。 三个页面，不同域之间利用 iframe 的 window.location.hash 传值，相同域之间直接 js 访问来通信。一开始 a.html 给 c.html 传一个 hash 值，然后 c.html 收到 hash 值后，再把 hash 值传递给b.html ，最后 b.html 将结果放到 a.html 的 hash 值中。

document.domain + ifame

该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。只需要给页面添加 document.domain ='test.com' 表示二级域名都相同就可以实现跨域。两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。

总结

• CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案。
• jsonp 只支持 GET 请求，jsonp 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。
• 不管是 Node 中间件正向代理还是 nginx 反向代理，主要是通过同源策略对服务器不加限制。
• 日常工作中，用得比较多的跨域方案是 CORS 和 nginx 反向代理。