原生 JavaScript 封装 JSONP 跨域请求
在 Web 开发中，跨域资源共享（CORS）是一个常见的问题。由于安全原因，浏览器限制了从一个源加载的脚本与另一个源的资源进行交互。JSONP（JSON with Padding）是一种早期用来解决跨域问题的技术。本文将介绍如何使用原生 JavaScript 封装 JSONP 跨域请求。
什么是 JSONP？
JSONP 是一种利用 <script> 标签获取跨域数据的技巧。由于 <script> 标签的加载不受同源策略的限制，因此可以通过动态创建 <script> 标签的方式来请求跨域数据。
JSONP 的工作原理
- 前端页面动态创建一个
<script>标签，并将其src属性设置为跨域请求的 URL。 - 该 URL 包含一个查询参数，通常是
callback，其值是一个函数名。 - 服务器接收到请求后，将数据包裹在函数调用中，然后返回给前端。
- 前端定义的函数接收到数据后，可以立即处理这些数据。
封装 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);
});
注意事项
- 安全性：由于 JSONP 可以被任何域调用，因此存在安全风险。确保你请求的域是可信的。
- 错误处理：JSONP 不支持原生的错误处理，需要通过其他方式（如超时机制）来处理错误。
- HTTP 方法：JSONP 通常只支持 GET 请求，因为它依赖于 URL 查询参数。
- 数据格式：服务器返回的数据必须是有效的 JSON 格式，并且需要被包裹在函数调用中。
结论
虽然现代的跨域解决方案（如 CORS）更为安全和强大，但在一些特定场景下，JSONP 仍然是一种有效的跨域数据获取方法。通过封装 JSONP 请求，我们可以在不使用额外库的情况下实现跨域数据交互。