前端的几种跨域，及解决方式

1. CORS（跨域资源共享）

CORS 是一种基于 HTTP 头的跨域访问控制机制，它允许服务器明确地允许来自其他源的请求。通过在服务器端设置适当的响应头，如 Access-Control-Allow-Origin，可以指定哪些源可以进行跨域请求。这种方法需要服务器端的配合，因为需要在服务器上配置 CORS。

优点：

• 灵活性和可控性高，可以根据需要配置不同的源。
• 支持现代浏览器的所有跨域请求类型（如 GET、POST、PUT、DELETE 等）。

缺点：

• 需要服务器端的支持和配置。

2. JSONP（JSON with Padding）

JSONP 是一种利用 <script> 标签的跨域请求方式。它通过动态创建一个 <script> 标签，并将跨域请求的 URL 作为其 src 属性。由于 <script> 标签不受同源策略的限制，所以可以请求到跨域的资源。服务器端需要将响应的数据以函数调用的形式返回，客户端通过定义对应的回调函数来接收数据。

优点：

• 简单易用，只需在客户端进行简单的配置。

缺点：

• 只支持 GET 请求。
• 存在安全风险，如跨站请求伪造（CSRF）。

3. 代理跨域

代理跨域是通过在客户端和服务器之间设置一个代理服务器，将跨域请求通过代理服务器转发到目标服务器。代理服务器可以处理 CORS 相关的问题，并将响应返回给客户端。这种方法可以在不修改服务器端代码的情况下解决跨域问题。

实现方式：

• Nginx 代理：在 Nginx 中配置代理规则，将请求转发到目标服务器。
• Node.js 代理：使用 Node.js 搭建一个代理服务器，通过中间件（如 http-proxy-middleware）将请求转发到目标服务器。

优点：

• 无需修改服务器端代码。
• 可以提供更多的控制和定制。

缺点：

• 需要额外的开发和维护工作。
• 可能会增加请求的延迟。

4. postMessage

postMessage 方法允许来自不同源的页面进行通信。通过窗口或 iframe 之间的消息传递来实现数据共享。发送方通过 window.postMessage 方法发送消息，并指定目标窗口的源。接收方通过注册 message 事件来监听和处理接收到的消息。

优点：

• 可以在不同源的页面之间进行安全通信。

缺点：

• 需要双方页面都进行编程实现。
• 可能受到浏览器安全策略的限制。

5. WebSocket

WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间建立持久的连接，并进行实时的双向数据传输。通过 WebSocket，可以绕过浏览器的同源策略限制，实现跨域通信。

优点：

• 支持实时通信，适用于需要实时数据交互的场景。

缺点：

• 需要客户端和服务器都支持 WebSocket 协议。
• 可能受到网络环境和浏览器兼容性的限制。

6. document.domain + iframe

此方法仅限主域相同，子域不同的跨域应用场景。通过两个页面都通过 JS 强制设置 document.domain 为基础主域，就实现了同域。然后，可以通过 iframe 进行跨域通信。

优点：

• 简单易用，适用于特定场景。

缺点：

• 局限性大，仅适用于主域相同的情况。