原生 JavaScript 封装 JSONP 跨域请求

在 Web 开发中，跨域资源共享（CORS）是一个常见的问题。由于安全原因，浏览器限制了从一个源加载的脚本与另一个源的资源进行交互。JSONP（JSON with Padding）是一种早期用来解决跨域问题的技术。本文将介绍如何使用原生 JavaScript 封装 JSONP 跨域请求。

什么是 JSONP？

JSONP 是一种利用 <script> 标签获取跨域数据的技巧。由于 <script> 标签的加载不受同源策略的限制，因此可以通过动态创建 <script> 标签的方式来请求跨域数据。

JSONP 的工作原理

1. 前端页面动态创建一个 <script> 标签，并将其 src 属性设置为跨域请求的 URL。
2. 该 URL 包含一个查询参数，通常是 callback，其值是一个函数名。
3. 服务器接收到请求后，将数据包裹在函数调用中，然后返回给前端。
4. 前端定义的函数接收到数据后，可以立即处理这些数据。

封装 JSONP 请求

以下是一个简单的 JSONP 请求封装示例：

function jsonp(url, callback) {
  // 定义回调函数的名称
  const callbackName = `jsonp_callback_${Date.now()}`;
  
  // 将回调函数存储在 window 对象上
  window[callbackName] = function(data) {
    // 执行回调函数，并将数据作为参数传入
    callback(data);
    // 移除 script 标签
    document.body.removeChild(script);
    // 删除 window 上的回调函数
    delete window[callbackName];
  };
  
  // 创建 script 标签
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;
  document.body.appendChild(script);
}

// 使用示例
jsonp('https://example.com/api/data', function(data) {
  console.log(data);
});

注意事项

1. 安全性：由于 JSONP 可以被任何域调用，因此存在安全风险。确保你请求的域是可信的。
2. 错误处理：JSONP 不支持原生的错误处理，需要通过其他方式（如超时机制）来处理错误。
3. HTTP 方法：JSONP 通常只支持 GET 请求，因为它依赖于 URL 查询参数。
4. 数据格式：服务器返回的数据必须是有效的 JSON 格式，并且需要被包裹在函数调用中。

结论

虽然现代的跨域解决方案（如 CORS）更为安全和强大，但在一些特定场景下，JSONP 仍然是一种有效的跨域数据获取方法。通过封装 JSONP 请求，我们可以在不使用额外库的情况下实现跨域数据交互。