小小白秒懂跨域知识

2023-09-07 20:22:45

跨域：浏览器和服务器之间的拉锯战

互联网是一个广阔无垠的海洋，我们每天都会与无数资源互动，从访问网站到观看视频，再到玩在线游戏。这些资源可能分布在不同的域名或服务器上。然而，浏览器有一项重要的安全策略——同源策略，它会阻止我们跨越这些域访问资源。

同源策略：浏览器安全的卫士

同源策略是浏览器的一项核心安全措施，它旨在保护我们免受恶意网站的侵害。恶意网站可能会窃取其他网站的数据或执行未经授权的操作。同源策略规定，只有来自同一域名、相同协议和相同端口的资源才能互相通信。因此，如果一个网站试图访问另一个网站的资源，而这两个网站不在同一个域下，就会触发跨域错误。

跨域错误：阻碍资源传输的绊脚石

跨域错误可能会导致各种问题，例如：

网页无法加载资源，如图片、脚本或样式表。
Ajax 请求无法发送或返回数据。
WebSocket 连接无法建立。
在线游戏无法正常运行。

跨域解决方案：打破壁垒

为了解决跨域问题，人们开发出了各种解决方案，最常见的包括：

1. CORS：跨域资源共享

CORS 是目前最流行的跨域解决方案。它允许服务器端指定哪些域可以访问其资源，以及允许哪些类型的请求。

代码示例：

// 允许所有域访问资源
Access-Control-Allow-Origin: *

// 允许特定域访问资源
Access-Control-Allow-Origin: https://example.com

2. JSONP：用函数包装 JSON

JSONP 是一种利用 <script> 标签加载跨域资源的技巧。它通过将 JSON 数据包装在一个函数调用中，绕过同源策略的限制。

代码示例：

<script>
  // 定义一个回调函数
  function myCallback(data) {
    // 处理 JSON 数据
  }

  // 创建一个 `<script>` 标签，并指定回调函数
  var script = document.createElement('script');
  script.src = 'https://example.com/api/data?callback=myCallback';
  document.body.appendChild(script);
</script>