JSONP：跨域之痛的解药

在前后端分离盛行的今天，跨域资源共享（CORS）策略几乎成为解决跨域问题的标配。但你是否了解过，在 CORS 出现之前，开发者们是如何巧妙地绕过浏览器的同源策略，实现跨域数据交互的呢？答案就是 JSONP，一种看似简单却蕴含着智慧的跨域解决方案。

同源策略与跨域难题

要理解 JSONP 的奥妙，首先需要了解浏览器的同源策略。简单来说，同源策略规定，浏览器只允许加载和执行来自相同源的脚本、样式表和图片等资源。所谓“相同源”，指的是协议、域名和端口号都完全一致。

想象一下，你的网站（www.example.com）需要从另一个网站（api.example.com）获取数据。由于这两个网站的域名不同，浏览器会将其视为不同源，从而阻止你的网站直接通过 AJAX 请求获取 api.example.com 的数据。这就是跨域问题，它就像一道无形的墙，阻碍着不同网站之间的数据交流。

JSONP 的巧妙之处

JSONP 的出现，为解决跨域问题提供了一条便捷的途径。它巧妙地利用了<script>标签不受同源策略限制的特性。我们都知道，浏览器允许加载和执行来自任何源的 JavaScript 脚本。JSONP 正是利用了这一点，将需要获取的数据包装在一个 JavaScript 函数调用中，然后通过<script>标签加载执行。

JSONP 的工作原理

假设我们需要从 api.example.com 获取用户信息。我们可以构造一个 URL，例如：https://api.example.com/user?callback=getUserInfo。其中，callback参数指定了一个回调函数的名称，即getUserInfo。

当浏览器加载这个 URL 时，api.example.com 会返回一段 JavaScript 代码，例如：getUserInfo({"name": "John", "age": 30});。这段代码实际上就是对getUserInfo函数的调用，并将用户信息作为参数传递给该函数。

在我们的网站中，我们需要预先定义好getUserInfo函数，例如：

function getUserInfo(data) {
  console.log(data.name); // 输出 "John"
  console.log(data.age); // 输出 30
}

当浏览器执行 api.example.com 返回的 JavaScript 代码时，就会调用getUserInfo函数，并将用户信息传递给它。这样，我们就成功地从 api.example.com 获取到了数据，实现了跨域数据交互。

JSONP 的优缺点

JSONP 的优点在于简单易用，兼容性好，几乎所有浏览器都支持。而且，它不受 CORS 策略的限制，即使目标服务器不支持 CORS，也可以使用 JSONP 进行跨域请求。

然而，JSONP 也存在一些局限性。首先，它只支持 GET 请求，无法发送 POST、PUT 等其他类型的请求。其次，由于 JSONP 依赖于脚本加载，存在一定的安全风险，例如可能受到 XSS 攻击。最后，如果回调函数的命名发生冲突，可能会导致程序出错。

JSONP 的应用场景

尽管现在 CORS 已经成为主流的跨域解决方案，但在一些特殊场景下，JSONP 仍然有一定的应用价值。例如，当我们需要与一些不支持 CORS 的老旧系统进行交互时，JSONP 仍然是一个不错的选择。另外，在一些对安全性要求不高的场景下，例如获取一些公开的 API 数据，也可以使用 JSONP 来简化开发。

常见问题解答

1. JSONP 和 AJAX 有什么区别？

JSONP 和 AJAX 都是用于获取数据的技术，但它们的工作原理不同。AJAX 使用 XMLHttpRequest 对象发送 HTTP 请求，而 JSONP 利用<script>标签加载 JavaScript 代码。JSONP 只能发送 GET 请求，而 AJAX 可以发送各种类型的请求。

2. JSONP 如何保证安全性？

JSONP 本身并没有提供安全机制，因此在使用 JSONP 时需要注意一些安全问题。例如，要确保数据来源可靠，避免加载恶意脚本；要对回调函数进行校验，防止 XSS 攻击。

3. JSONP 是否会被淘汰？

随着 CORS 的普及，JSONP 的应用场景越来越少。但由于其简单易用和兼容性好的特点，在一些特殊场景下仍然有一定的应用价值。

4. 如何调试 JSONP 请求？

可以使用浏览器的开发者工具来调试 JSONP 请求。例如，在 Chrome 浏览器中，可以打开开发者工具的“Network”面板，查看 JSONP 请求的详细信息，例如请求头、响应头、响应数据等。

5. JSONP 是否支持跨域发送 Cookie？

JSONP 不支持跨域发送 Cookie。如果需要跨域发送 Cookie，可以使用 CORS 策略。