从源和域解读芋圆，带你认识跨域本质

前端

2023-12-13 00:26:10

序章：互联网的连接之道——源与域

互联网世界，如同浩瀚的海洋，千万网站如星罗棋布的岛屿，彼此交相辉映，构成一个庞大而紧密的网络。然而，岛屿之间并非毫无隔阂，它们彼此独立，拥有自己的领地，这便是"同源策略"。

同源策略，是互联网中的一项安全机制，它限制了不同源之间的资源共享。具体来说，同源策略规定，只有来自相同源（协议、域名和端口号相同）的网页，才能访问彼此的资源，否则将会受到浏览器的阻止。

第一章：同源策略的由来与限制

同源策略的诞生，源于对网络安全的考量。它旨在防止恶意网站窃取用户敏感信息，例如：Cookie、表单数据等。恶意网站若能跨源访问其他网站的资源，便可轻易获取这些信息，对用户隐私安全造成严重威胁。

同源策略的限制，具体体现在以下几个方面：

网页无法通过Ajax请求跨源获取数据。
网页无法跨源设置Cookie。
网页无法跨源读取Cookie。
网页无法跨源提交表单。

这些限制，有效地防止了恶意网站对用户隐私的侵犯。然而，也给跨域数据传输带来了诸多不便。

第二章：规避同源策略，跨越网络藩篱

既然同源策略带来了不便，那么有没有办法规避它呢？答案是肯定的。目前，业界常用的跨域解决方法主要有以下几种：

1. JSONP

JSONP（JSON with Padding），是一种利用<script>标签实现跨域数据传输的方案。其原理是：网页在需要跨域请求数据时，生成一个唯一的回调函数，并将该函数名作为参数附加在请求URL中，然后发起请求。服务端收到请求后，将数据封装成JSON格式，并以回调函数作为函数名执行，从而将数据返回给网页。

2. CORS

CORS（Cross-Origin Resource Sharing），是一种基于HTTP协议的跨域解决方案。其原理是：服务端在响应跨域请求时，在响应头中添加CORS相关的字段，表明该资源允许跨域访问。浏览器在收到响应后，会检查这些字段，若允许跨域，则允许页面访问该资源，否则阻止访问。

3. WebSocket

WebSocket，是一种双向通信协议，可实现客户端与服务端之间的实时通信。其原理是：客户端与服务端建立WebSocket连接后，双方可通过该连接发送和接收数据，不受同源策略的限制。

4. Server-to-Server

Server-to-Server，即服务器端代理。其原理是：客户端向本域的代理服务器发起请求，代理服务器再向目标服务器发起请求，获取数据后返回给客户端。这种方式可以绕过同源策略的限制，实现跨域数据传输。

第三章：跨域的实践：揭开JSONP的神秘面纱

在众多的跨域解决方案中，JSONP因其简单易用、兼容性好等优点，而广受欢迎。接下来，我们将详细介绍JSONP的原理和实现方法。

JSONP原理

JSONP的原理，如前文所述，是利用<script>标签实现跨域数据传输。具体流程如下：

网页生成一个唯一的回调函数，并将其名作为参数附加在请求URL中。
服务端收到请求后，将数据封装成JSON格式，并以回调函数作为函数名执行，从而将数据返回给网页。
网页收到响应后，执行回调函数，获取数据并进行处理。

JSONP实现

实现JSONP，需要在网页和服务端分别进行操作。

网页端：

<script>
// 生成唯一的回调函数
function uniqueCallback(data) {
  // 处理数据
}

// 向服务端发起跨域请求
var script = document.createElement('script');
script.src = 'http://example.com/jsonp?callback=uniqueCallback';
document.body.appendChild(script);
</script>

服务端：

// 获取请求参数中的回调函数名
$callback = $_GET['callback'];

// 将数据封装成JSON格式
$data = array(
  'name' => 'John Doe',
  'age' => 30
);

// 以回调函数作为函数名执行，并返回数据
echo "$callback(" . json_encode($data) . ");";