本文首发微信公众号：前端徐徐。
跨域的概念
跨域（Cross-Origin）是指在Web开发中，一个域（网站的源）的 JavaScript 代码试图访问另一个域的资源，而这个资源可能位于不同的域名、端口或协议下。域是由协议、主机名和端口号组成的，只有这三者完全相同的两个网址才属于同一个域。
跨域请求是由浏览器的同源策略（Same-Origin Policy）所限制的。同源策略是浏览器的一种安全机制，它防止一个域中的Web页面从另一个域中获取数据，或与另一个域进行交互，以防止恶意网站利用跨域漏洞进行攻击。
具体来说，同源策略要求以下信息完全相同，才被视为同源：
- 协议（Protocol）：即 URL 的开头部分，如 http、https 等。
- 域名（Host）：URL 中的域名部分。
- 端口（Port）：URL 中的端口部分。
如果上述三者中有任何一个不同，就被视为跨域。
JSONP
JSONP（JSON with Padding）是一种利用<script>标签实现的跨域数据请求技术，允许页面从不同域的服务器请求数据并获取执行。
原理：
- 客户端在页面中创建一个
<script>标签，并指定请求的 URL，该 URL 由服务器返回 JSON 数据包装在一个函数调用中。 - 服务器接收到 JSONP 请求后，将数据以参数形式包装在指定的回调函数中，并作为 JavaScript 代码返回给客户端。
- 客户端接收到响应后，会直接执行返回的 JavaScript 代码，从而触发回调函数，并处理获取到的数据。
CORS
CORS（Cross-Origin Resource Sharing）是一种现代化的跨域解决方案，它允许 Web 服务器在响应中声明允许哪些域的客户端来访问资源。
原理：
- 浏览器在发送跨域请求时，会自动在请求头中添加 Origin 字段，该字段指示该请求的源（域）。
- 服务器接收到请求后，根据 Origin 字段判断是否允许该域访问资源。
- 如果服务器允许该域访问资源，需要在响应头中添加 Access-Control-Allow-Origin 字段，并将其设置为允许的源，可以是具体的域名，也可以是通配符*表示允许任意域访问。
- 服务器还可以在响应头中添加其他CORS相关字段，如 Access-Control-Allow-Methods（允许的HTTP方法）、Access-Control-Allow-Headers（允许的请求头）、Access-Control-Allow-Credentials（是否允许发送凭证）等。
postMessage
postMessage 是 HTML5 引入的一种跨文档通信技术，它允许在不同窗口或 iframe 之间安全地传递消息。通过 postMessage，可以在跨域的页面之间进行双向通信，实现数据的传递和交互。
原理：
- 在发送消息的窗口（发送消息的页面或iframe）中调用 postMessage() 方法，向目标窗口发送消息。该方法接受两个参数：要发送的数据和目标窗口的源（origin）。
- 目标窗口中通过监听 message 事件来接收消息。当接收到消息时，可以获取发送的数据并进行处理。
WebSocket
使用 WebSocket 进行跨域通信是一种高效的实时通信解决方案，它允许在不同域之间建立全双工的实时连接。WebSocket 协议自带跨域功能，不受同源策略限制，因此可以轻松地在不同域的页面间进行通信。
原理：
- 客户端通过 HTTP 请求发送一个特殊的握手请求到 WebSocket 服务器，请求头中包含Upgrade字段，值为"websocket"，表示希望升级到 WebSocket 协议。
- WebSocket 服务器接收到握手请求后，如果支持 WebSocket 协议，会返回一个101状态码，表示同意升级到 WebSocket。
- 连接升级成功后，客户端和服务器之间建立了 WebSocket 连接，双方可以通过该连接进行全双工的实时通信，可以发送和接收数据。
document.domain+iframe
使用 document.domain 和 iframe 结合的方式是一种简单的跨域通信解决方案，适用于在同一顶级域名下的子域之间进行跨域通信。该方法要求主页面和子页面都设置相同的顶级域名，并使用 document.domain进行设置。
原理：
- 主页面和子页面都位于相同的顶级域名下（例如，主页面为 https://example.com，子页面为https://sub.example.com）。
- 主页面和子页面通过在页面的 JavaScript 代码中分别设置 document.domain，将其值设置为相同的顶级域名（即example.com），这样它们就共享了相同的域，成为同一域。
- 主页面中的 JavaScript 代码可以通过 iframe 元素获取子页面的 window 对象，并与子页面进行通信。
window.name
使用 window.name 实现跨域通信是一种较为古老但简单有效的跨域解决方案，它适用于在同一个浏览器窗口（或标签页）下进行跨域通信。
原理：
- 当页面跳转到不同域的页面时，浏览器会刷新 window 对象，但是 window.name 属性会保留之前的值。
- 通过在一个页面中设置 window.name，然后在同一窗口中打开另一个不同域的页面，在该页面中可以读取前一个页面设置的 window.name值，实现跨域通信。
location.hash
使用 location.hash 实现跨域通信是一种比较简单的跨域解决方案。它适用于在同一个浏览器窗口（或标签页）下进行跨域通信，并且可以在 URL 中传递少量数据。
原理：
- 当页面跳转到不同域的页面时，浏览器会刷新 window 对象，但是 location.hash 属性会保留之前的值。
- 通过在一个页面中设置 location.hash，然后在同一窗口中打开另一个不同域的页面，在该页面中可以读取前一个页面设置的 location.hash值，实现跨域通信。
Node代理
使用 Node.js 代理是一种常见且强大的跨域解决方案。通过在 Node.js 服务器端进行代理，可以实现在客户端发送跨域请求时将请求转发到目标服务器，并将响应返回给客户端，从而绕过浏览器的同源策略。
原理：
- 客户端发送跨域请求到 Node.js 服务器。
- Node.js 服务器接收到请求后，通过 HTTP 模块或者其他请求库，将请求转发到目标服务器。
- 目标服务器处理请求并返回响应数据给 Node.js 服务器。
- Node.js 服务器将目标服务器的响应数据返回给客户端。
Nginx代理
使用 Nginx 代理也是一种常见的跨域解决方案。Nginx 是一个高性能的 Web 服务器和反向代理服务器，通过配置 Nginx 服务器来实现代理，可以将客户端发送的跨域请求转发到目标服务器，并将目标服务器的响应返回给客户端，从而绕过浏览器的同源策略。
原理：
- 客户端发送跨域请求到 Nginx 服务器。
- Nginx 服务器根据配置的代理规则，将请求转发到目标服务器。
- 目标服务器处理请求并返回响应数据给 Nginx 服务器。
- Nginx 服务器将目标服务器的响应数据返回给客户端。
CORS Anywhere
CORS Anywhere 是一个开源的跨域解决方案，它是一个反向代理服务器，通过在服务器端转发请求并添加 CORS 头部，实现跨域资源共享。CORS Anywhere 允许客户端从一个域名发出跨域请求，并将请求转发到目标服务器，然后将目标服务器的响应返回给客户端，从而绕过浏览器的同源策略。
原理：
- 客户端发送跨域请求到 CORS Anywhere 服务器。
- CORS Anywhere 服务器接收到请求后，通过在服务器端向目标服务器发送请求，并将目标服务器的响应数据返回给客户端
对比与总结
- JSONP:
优点：简单易用，兼容性好。
缺点：只支持 GET 请求，安全性较差。
- CORS:
优点：支持所有 HTTP 请求方法，更安全，服务器有更细粒度的控制。
缺点：兼容性较 JSONP 稍差，在老旧浏览器上可能不支持。
- postMessage:
优点：安全性好，适用于不同窗口或 iframe 之间的跨域通信。
缺点：需要在通信双方都实现 postMessage 处理。
- WebSocket:
优点：实时性好，适用于实时通信场景，不受同源策略限制。
缺点：需要服务器支持 WebSocket 协议。
- document.domain+iframe:
优点：简单易用，适用于同一顶级域名下的子域之间进行跨域通信。
缺点：限制较多，只适用于同一顶级域名下的子域之间。
- window.name:
优点：兼容性好;操作简单。
缺点：数据量小;只适用于同窗口。
- location.hash:
优点：简单易用，适用于同一窗口（或标签页）下的跨域通信。
缺点：数据传递在URL中，数据量有限，适合传递少量信息。
- Node.js代理:
优点：配置灵活，跨域请求的处理逻辑移到服务器端，不受同源策略限制。
缺点：需要搭建 Node.js 服务器并进行开发，对于前端开发者可能涉及到服务器的知识。
- Nginx代理:
优点：配置灵活，跨域请求的处理逻辑移到服务器端，更易维护和管理，不受同源策略限制。
缺点：需要搭建 Nginx 服务器并配置，对于前端开发者可能涉及到服务器的知识。
- CORS Anywhere:
优点：简单易用，不需要前后端都实现特殊处理，可以绕过浏览器的同源策略。
缺点：需要部署 CORS Anywhere 服务器。
根据不同的需求和场景，选择合适的跨域解决方案。通常情况下，优先考虑使用 CORS 或 JSONP，因为它们是浏览器原生支持的跨域解决方案。如果需要实时通信，可以考虑 WebSocket。如果需要在不同域之间代理请求，可以使用 Nginx 代理或 Node.js 代理。对于子域间的跨域通信，可以使用document.domain+iframe 或 location.hash。如果只是临时的跨域请求，CORS Anywhere 是一个快速简便的解决方案。在实际开发中，还应考虑安全性和性能方面的因素，避免出现安全漏洞或性能问题。
