一天一个前端知识点（4）：什么是跨域（Cross-Origin）？你是如何处理跨域问题的？

南叶
48 阅读7分钟

什么是跨域

跨域是指在浏览器中，当前页面的域名与所请求资源的域名不一致时发生的一种安全限制。出于安全考虑，浏览器会限制从当前页面向另一个域名发送请求，从而防止恶意代码获取用户的敏感数据或者攻击其他网站。在前端开发中，经常会遇到需要向其他域名的接口发送请求的情况。

常见的跨域和解决方法

  1. JSONP：通过动态创建 <script> 标签实现跨域请求数据，可以绕过浏览器的跨域限制。

  2. CORS：通过服务器设置响应头中的 Access-Control-Allow-Origin 字段，来允许指定的跨域请求。这需要服务端进行支持。

  3. 代理：在同一域名下搭建一个代理服务器，让该服务器代理请求其他域名的接口，并将结果返回给前端。

  4. postMessage：使用 HTML5 的 postMessage API 可以跨文档通信，实现跨域请求数据。

  5. WebSocket：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，可以在浏览器中实现跨域通信。

需要注意的是，以上方法都有其优缺点，选择适合自己的方法需要根据具体的场景来考虑。同时，一些新兴的前端技术，如 GraphQL 和 Serverless，也能够有效地解决跨域问题。

什么是 JSONP ？

JSONP（JSON with Padding）是一种跨域数据传输的解决方案，它利用了浏览器对于 script 标签跨域请求的支持。JSONP 的基本原理是利用 script 标签的 src 属性可以引入跨域资源的特性，通过在 src 属性中指定一个回调函数的名称，服务器在返回数据时将数据作为回调函数的参数传回来。这样，客户端在获得数据后就可以调用该回调函数来处理数据了。

举个栗子

一个 JSONP 请求可以像这样构造：

function handleData(data) {
  // 处理数据
}

var script = document.createElement('script');
script.src = 'https://example.com/api/data?callback=handleData';
document.head.appendChild(script);

在上述代码中，我们通过一个名为 handleData 的回调函数来处理从 example.com 返回的数据。在请求数据时，我们将回调函数的名称传递给服务器，服务器返回的数据就会被包装在一个调用该回调函数的脚本中。客户端接收到数据后就会自动调用该回调函数，将数据传递给它。这样，我们就完成了一个跨域请求，并成功地获取到了数据。

什么是 CORS ？

CORS（Cross-Origin Resource Sharing）是一种浏览器安全机制，用于限制跨域HTTP请求的权限。在Web应用程序中，跨域HTTP请求是指从一个域向另一个域发送HTTP请求，例如从example.com向api.example.com发送请求。由于安全原因，浏览器会阻止跨域HTTP请求，但可以使用CORS机制来允许特定的跨域请求。

当浏览器执行跨域请求时，会向目标服务器发送一个包含origin（源）头的请求。服务器可以使用响应头Access-Control-Allow-Origin来指定允许访问的源。如果请求源与响应头中指定的源不匹配，则浏览器会阻止请求。此外，服务器还可以使用其他响应头，如Access-Control-Allow-Methods和Access-Control-Allow-Headers来进一步指定允许的HTTP方法和请求头。

CORS机制是一种重要的安全措施，可以帮助Web应用程序保护其资源免受跨站点攻击和数据泄露的风险。

什么是 代理 ？

代理（Proxy）是一种网络服务，它可以充当客户端和服务器之间的中间人，为客户端发送请求和接收服务器响应提供一个中转服务。代理可以在客户端和服务器之间进行过滤、缓存、负载均衡、安全控制等操作，从而提高网络效率和安全性。

代理有多种类型，包括反向代理和正向代理。正向代理是由客户端发起请求，代理将请求转发给服务器。正向代理通常用于访问受限制的资源，例如在防火墙后面访问互联网资源，或者在企业内部网络中访问外部资源。反向代理则是由服务器发起请求，代理将请求转发给客户端。反向代理通常用于负载均衡和隐藏后端服务器的真实IP地址等场景。

使用代理可以提高网络效率和安全性，同时还可以帮助网络管理员监控和管理网络流量。代理也是实现许多网络服务的基础，例如Web缓存、内容分发网络（CDN）、虚拟专用网络（VPN）等。

什么是 postMessage ？

postMessage是JavaScript提供的一种跨文档通信（Cross-document messaging）机制，可以在不同窗口或文档之间传递数据。

在Web应用程序中，通常使用postMessage来实现以下功能：

  1. 跨域通信：由于同源策略限制，Web页面只能与同一域名下的其他页面进行通信。使用postMessage可以在不同域名之间传递数据，实现跨域通信。
  2. 父子窗口通信：Web页面可以通过iframe元素嵌入其他页面，使用postMessage可以实现嵌套页面之间的通信。
  3. 跨窗口消息传递：使用postMessage可以在不同窗口之间传递数据，例如在浏览器窗口和弹出窗口之间传递数据。

使用postMessage需要两个参数：要发送的消息和目标窗口的源。源可以是字符串形式的域名、协议和端口号的组合，也可以是通配符*，表示允许来自任何源的消息。

接收消息的窗口需要监听message事件，当接收到消息时，可以通过event.source属性获取消息来源窗口，通过event.data属性获取传递的数据。

需要注意的是，postMessage可能存在安全风险，因为它可以向任何窗口发送消息，包括恶意网站。因此，使用postMessage时应该限制目标窗口的源，并对接收到的数据进行安全检查。

什么是 WebSocket ？

WebSocket是一种基于TCP协议的网络协议，它可以在浏览器和服务器之间建立持久化连接，实现双向实时通信。与HTTP协议不同，WebSocket协议可以支持服务器主动向客户端推送数据，而不需要客户端发起请求。

WebSocket协议的建立过程类似于HTTP协议的握手过程。当客户端发起WebSocket连接请求时，服务器需要发送一个HTTP响应，其中包含协议升级的头部，通知客户端将协议从HTTP升级到WebSocket。之后，客户端和服务器之间就可以建立WebSocket连接，实现双向数据传输。

与HTTP协议相比，WebSocket协议具有以下优点：

  1. 双向通信：WebSocket协议可以实现客户端和服务器之间的双向实时通信，不需要客户端反复发起请求。
  2. 低延迟：WebSocket协议的建立过程只需要一次握手，建立后可以保持持久连接，减少了通信的开销，可以实现更低的延迟。
  3. 高效性：WebSocket协议采用二进制传输数据，相比于HTTP协议的文本传输更加高效，可以传输更大的数据量。

WebSocket协议可以用于多种实时应用场景，例如聊天室、在线游戏、实时协作等。由于浏览器支持程度较高，也可以作为浏览器和服务器之间的高效通信方式。

avatar
文章
阅读
粉丝