JavaScript 中怎么用 JSONP 解决老旧接口的跨域请求-js教程-PHP中文网

jsonp是一种利用标签绕过同源策略的伪ajax方案，通过动态创建script标签、服务端返回函数调用格式数据（如handledata({...})）实现跨域get请求，需服务端配合且存在安全与功能局限。

javascript 中怎么用 jsonp 解决老旧接口的跨域请求

JSONP 是一种利用 <script></script> 标签不受同源策略限制的特性，绕过跨域限制的“伪 Ajax”方案，适用于只支持 GET、且服务端配合返回特定格式数据的老旧接口。

JSONP 的核心原理

浏览器允许动态插入 <script src="https://xxx.com/api?callback=handleData"></script>，服务端收到请求后不返回纯 JSON，而是返回一段可执行的 JavaScript 代码，例如：

handleData({"name": "张三", "age": 28})

这段代码会自动调用前端预先定义好的函数 handleData，从而把数据传进来。本质是“借 script 标签加载远程 JS”，不是真正的 XMLHttpRequest。

手动实现一个 JSONP 请求

不需要框架，几行原生 JS 就能搞定：

动态创建 <script></script> 元素，设置 src 属性，拼上接口地址和 callback 参数名
在全局挂载回调函数（如 window.handleData = function(data) { ... }）
请求完成后，及时移除 <script></script> 标签并清理全局函数，避免污染

示例代码：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function jsonp(url, callbackName, success) {
  const script = document.createElement('script');
  window[callbackName] = function(data) {
    success(data);
    document.head.removeChild(script);
    delete window[callbackName];
  };
  script.src = `${url}${url.includes('?') ? '&' : '?'}callback=${callbackName}`;
  document.head.appendChild(script);
}

// 使用
jsonp('https://legacy-api.example.com/user', 'myCallback', (data) => {
  console.log('拿到数据：', data);
});