前端解决跨域问题（ 6种方法 ）

本专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。
本专栏的风格是力求简洁明了。

跨域问题是指当一个网页试图访问来自不同源（域名、协议、端口）的资源时，浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。

解决前端跨域问题的方法：

1. CORS（跨域资源共享）

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

具体实现步骤如下：

• 在服务器端，通过设置响应头Access-Control-Allow-Origin来指定允许的跨域源。例如，Access-Control-Allow-Origin: * 表示允许来自任何源的跨域请求，或者可以指定具体的源，如Access-Control-Allow-Origin: http://example.com。
• 服务器还可以设置其他 CORS 相关的头部，如Access-Control-Allow-Methods（允许的请求方法）、Access-Control-Allow-Credentials（是否允许携带凭证）等。
• 在客户端，发起跨域请求时，浏览器会根据服务器返回的 CORS 头部信息来判断是否允许该请求。

CORS 是一种比较灵活和常用的跨域解决方案，但需要服务器端的支持和配置。

2.JSONP（JSON with Padding）

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

具体实现步骤如下：

• 在客户端，创建一个全局的回调函数，用于处理接收到的数据。
• 通过动态创建 <script> 标签，并设置其 src 属性为跨域请求的 URL，同时将回调函数的名称作为查询参数传递给服务器。
• 服务器接收到请求后，根据查询参数中的回调函数名称，将数据包装成函数调用的形式返回。
• 客户端的浏览器会执行返回的脚本，从而触发回调函数，并将数据传递给回调函数进行处理。

JSONP 的缺点是只支持 GET 请求，并且在安全性和灵活性方面有一些限制。

3. Proxy（代理）

可以在本地搭建一个代理服务器，将跨域请求通过代理服务器转发到目标服务器。代理服务器可以处理 CORS 相关的问题，并将响应返回给客户端。

具体实现步骤如下：

• 在本地搭建一个代理服务器，可以使用 Node.js 等技术实现。
• 客户端将跨域请求发送到代理服务器，代理服务器根据配置将请求转发到目标服务器。
• 目标服务器返回的数据经过代理服务器后再返回给客户端。

代理服务器可以提供更多的控制和定制，但需要额外的开发和维护工作。

4. PostMessage

如果跨域的两个页面属于同一父域下的不同子域，或者属于同一页面的不同 iframe，可以使用 postMessage 方法进行通信。通过窗口或 iframe 之间的消息传递来实现数据共享。

具体实现步骤如下：

• 发送方通过 window.postMessage 方法发送消息，指定目标窗口或 iframe 的源。
• 接收方通过注册 message 事件来监听和处理接收到的消息。

postMessage 方法适用于一些特定的场景，但对于跨不同域的情况并不适用。

5.WebSocket

WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间建立持久的连接，并进行实时的双向数据传输。通过 WebSocket，跨域通信可以更加高效和实时。

具体实现步骤如下：

• 客户端和服务器都需要支持 WebSocket 协议，并建立 WebSocket 连接。
• 一旦连接建立，双方可以通过 WebSocket 进行实时的消息收发。

WebSocket 适用于需要实时通信的场景，如实时聊天、实时数据推送等。

6. 服务器端反向代理

将前端应用部署到一个反向代理服务器后面，然后通过代理服务器来处理跨域请求。代理服务器可以将请求转发到后端的不同服务器，并处理 CORS 相关的问题。

具体实现步骤如下：

• 设置反向代理服务器，如 Nginx 或 Apache。
• 在反向代理服务器中配置适当的规则和头信息，以处理跨域请求。

这种方法需要对服务器配置有一定的了解，并可能需要一些额外的配置工作。

选择跨域解决方法时，需要考虑项目的具体需求、安全性、可行性和可维护性等因素。同时，还需要注意跨域请求的安全性，避免暴露敏感信息或受到跨站请求伪造（CSRF）等攻击。