前端跨域系列（3）—— 跨域方法总结

跨域是前端开发中经常遇到的一个问题，它指的是浏览器不允许从一个源（协议、域名、端口）向另一个源发送请求。本文将对跨域的几种常见方法进行总结，包括 JSONP、CORS、WebSocket、Tunnel 和 HTML5。

JSONP

JSONP（JSON with Padding）是一种利用<script>标签没有跨域限制的技巧。它的原理是将数据包装成 JSON 格式，然后通过<script>标签的 src 属性发送带有 callback 参数的 GET 请求，服务端将接口返回数据拼凑到 callback 函数中，返回给浏览器，浏览器解析执行，从而前端拿到 callback 函数返回的数据。

JSONP 的优点是简单易用，不需要对服务器进行任何修改，也不需要额外安装任何插件。缺点是只支持 GET 请求，而且安全性较差，容易受到 XSS 攻击。

CORS

CORS（Cross-Origin Resource Sharing）是一种由 W3C 制定的跨域解决方案。它的原理是通过在 HTTP 头部中添加额外的信息，来告诉浏览器允许哪些源可以访问该资源。

CORS 的优点是安全性高，支持所有类型的 HTTP 请求，而且可以控制哪些源可以访问资源。缺点是需要对服务器进行配置，并且浏览器对 CORS 的支持程度不同。

WebSocket

WebSocket 是一种双向通信协议，它允许浏览器与服务器建立一个持久连接。这样，浏览器就可以随时向服务器发送数据，而服务器也可以随时向浏览器发送数据。

WebSocket 的优点是实时性好，可以实现双向通信，而且支持二进制数据传输。缺点是需要对服务器进行配置，并且浏览器对 WebSocket 的支持程度不同。

Tunnel

Tunnel 是一种通过代理服务器来实现跨域的解决方案。它的原理是将请求转发到代理服务器，然后由代理服务器再将请求转发到目标服务器。

Tunnel 的优点是简单易用，不需要对服务器进行任何修改，也不需要额外安装任何插件。缺点是性能开销较大，而且安全性较差。

HTML5

HTML5 提供了多种跨域解决方案，包括 CORS、WebSocket 和 MessageChannel。其中，CORS 和 WebSocket 已经在上文中介绍过，这里主要介绍 MessageChannel。

MessageChannel 是 HTML5 中的一种跨域通信机制。它的原理是通过创建一个 MessageChannel 对象，然后将该对象传递给另一个窗口或 iframe。这样，两个窗口或 iframe 之间就可以通过 MessageChannel 对象进行通信。

MessageChannel 的优点是简单易用，不需要对服务器进行任何修改，也不需要额外安装任何插件。缺点是只支持浏览器之间的通信，不支持浏览器与服务器之间的通信。

总结

本篇文章主要总结了前端跨域的几种常见方法，包括 JSONP、CORS、WebSocket、Tunnel 和 HTML5。每种方法都有其自身的优缺点和适用场景。开发者可以根据实际情况选择合适的方法来解决跨域问题。