跨域入门指南：小白也能懂的跨域概念

wayhome在哪
179 阅读4分钟

1. 什么是跨域？

想象一下，你正在一个网站上浏览图片，而这些图片实际上是从另一个服务器加载过来的。当你试图通过JavaScript代码从这个不同的服务器获取数据时，浏览器可能会阻止这种行为，并报出一个错误，这就是所谓的“跨域”问题。

跨域简单来说，就是当你的网页尝试与不同源（即协议、域名或端口不同）的服务器进行交互时遇到的限制。例如，如果你在一个https://example.com的页面上运行JavaScript代码，它不能直接请求来自https://anotherdomain.com的数据，除非满足某些特定条件。

2. 为什么会有跨域限制？

这主要是为了安全考虑。浏览器实施了一种叫做同源策略的规则，确保一个网站的脚本不能随意访问其他网站的数据。简单地说，同源策略是一种安全机制，旨在防止一个网站上的脚本访问另一个网站的数据。例如，如果你正在浏览http://example.com，那么该页面中的JavaScript代码不能直接读取来自https://example.com的数据，除非满足某些特定条件。这是因为两个网站被认为是不同的源。

  • 协议(shcema)：指的是使用的传输协议，如HTTP或HTTPS。
  • 域名(domain)：指的是服务器的地址，如example.com。
  • 端口(export)：指的是通信所用的端口号，默认情况下HTTP使用80，HTTPS使用443。

如果这三个要素中有任何一个不同，那么它们就被认为是不同的源。 当你尝试通过JavaScript发起跨域请求时，浏览器通常会阻止这个操作，并在控制台中显示错误信息.

3. 如何解决跨域问题？

为了解决这个问题，开发者们设计了几种方法来安全地允许跨域通信：

3.1 CORS (Cross-Origin Resource Sharing)

  • 这是目前最常用的方法之一。服务器可以在响应中包含特殊的HTTP头部，告诉浏览器哪些来源是可以信任的，从而允许它们之间的数据交换。

假如你有一个网站https://example.com，用户访问这个网站时，JavaScript代码需要请求另一个服务器https://api.exampledata.com上的数据。然而，由于同源策略，浏览器阻止了这个请求，并在控制台报错。 为了使这个请求成功，https://api.exampledata.com的服务器管理员需要配置响应头以允许来自https://example.com的请求。这可以通过添加如下HTTP响应头实现：

Access-Control-Allow-Origin: https://example.com

如果服务器希望允许所有来源的请求，可以使用通配符：

Access-Control-Allow-Origin: *

一旦正确配置了CORS头部，浏览器将允许从https://example.com发出的请求到达https://api.exampledata.com并接收响应。

3.2 JSONP

  • JSONP是一种旧的技术，它通过动态添加<script>标签的方式来绕过同源限制。不过由于其局限性和潜在的安全风险，现在使用得较少。 例如：
<script src="https://legacyapi.com/data?callback=myCallbackFunction"></script>

然后，在你的页面中定义myCallbackFunction函数来处理返回的数据。但JSONP已经逐渐被淘汰，因为它存在安全风险并且只支持GET请求，现代Web应用会优先考虑使用CORS。

3.3 代理服务器

  • 在客户端和目标服务器之间设置一个中间人——代理服务器。客户端向同一个源下的代理服务器发送请求，代理服务器再转发给目标服务器并把结果返回给客户端。在本地开发环境中，你可以使用Node.js或其他语言搭建一个简单的代理服务器。

3.4 WebSocket

  • WebSocket是一种基于TCP的协议，它允许在单个连接上进行全双工通信。与传统的HTTP请求不同，WebSocket握手阶段不受同源策略的影响，因此可以在不同源之间建立持久连接。

3.5 PostMessage API

  • PostMessage API允许不同源的窗口或iframe之间以一种安全的方式传递消息。每个窗口都可以监听来自其他窗口的消息，并根据需要作出响应。这种方法特别适用于嵌入式内容或弹出窗口之间的通信。
// 父窗口向子窗口发送消息
childWindow.postMessage('Hello from parent', 'https://childsite.com');

// 子窗口接收消息
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://parentsite.com') return;
  console.log('Received message:', event.data);
});

4. 总结

跨域并不是什么可怕的东西，它只是浏览器为了保障用户安全而设立的一道屏障。随着Web技术的发展，我们有了更多更好的工具来处理跨域问题。作为小白，只要你掌握了基本原理，就能轻松应对大多数跨域挑战。希望这篇文章能帮助你更好地理解跨域的概念，并且知道如何去解决它。

avatar
文章
阅读
粉丝