jsonp解决跨域问题_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

jsonp解决跨域问题

2025-11-12

浏览次数：次

返回列表

JSONP通过script标签跨域请求数据，利用服务器返回函数调用传递结果，仅支持GET、缺乏错误处理且存在安全风险，现代开发推荐CORS或代理方案。

jsonp解决跨域问题

跨域问题在前端开发中很常见，尤其是请求不同域名下的接口时。JSONP 是早期解决跨域问题的一种方案，利用了 <script></script> 标签不受同源策略限制的特性。

JSONP 的基本原理

浏览器不允许 Ajax 请求跨域资源，但 <script></script> 标签可以加载其他域的 J*aScript 文件。JSONP 就是基于这一点，通过动态创建 script 标签来请求数据，服务器返回一段 J*aScript 函数调用，参数就是需要传递的数据。

例如：前端希望获取用户信息，可以这样发起请求：

服务器收到请求后，返回如下内容：

handleResponse({"name": "张三", "age": 25});

浏览器会立即执行这段 JS，只要事先定义了 handleResponse 函数，就能拿到数据。

手动实现 JSONP 请求

可以通过 J*aScript 动态创建 script 标签来实现 JSONP：

小文AI论文

轻松解决论文写作难题，AI论文助您一键完成，仅需一杯咖啡时间，即可轻松问鼎学术高峰！

232 查看详情小文AI论文

定义一个全局回调函数，用于处理返回的数据
创建 script 元素，设置 src 为带 callback 参数的 URL
将 script 添加到页面中，触发请求
请求完成后，移除 script 标签并清理回调函数

示例代码：

function jsonp(url, callback) {
const script = document.createElement('sc

ript');
  const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());

  window[callbackName] = function(data) {
    callback(null, data);
    delete window[callbackName];
    document.head.removeChild(script);
  };

  script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + callbackName;
  script.onerror = function() {
    callback(new Error('JSONP request failed'));
    delete window[callbackName];
    document.head.removeChild(script);
  };

  document.head.appendChild(script);
}

// 使用方式
jsonp('http://api.example.com/data', function(err, data) {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});