jsonp解决跨域问题-js教程-PHP中文网

jsonp解决跨域问题

冷漠man

发布： 2025-11-12 20:56:02

原创

570人浏览过

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

jsonp解决跨域问题

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

JSONP 的基本原理

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

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

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

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

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

手动实现 JSONP 请求

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

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

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

示例代码：

function jsonp(url, callback) {
  const script = document.createElement('script');
  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);
  }
});