JavaScript 中 Ajax 怎么处理 JSONP 跨域老旧方案-js教程-PHP中文网

jsonp是一种利用标签绕过同源策略的跨域方案，仅支持get请求，需服务端返回函数调用格式数据，前端预定义回调函数，存在xss风险，仅适用于可信接口。

javascript 中 ajax 怎么处理 jsonp 跨域老旧方案

JSONP 是一种针对老旧浏览器设计的跨域方案，它不依赖现代标准，而是利用 <script></script> 标签天然不受同源策略限制的特性来“绕过”限制。虽然现在基本被 CORS 取代，但在维护老系统、兼容 IE8/9 或对接不支持 CORS 的第三方接口时，仍可能遇到。

核心逻辑很简单：让服务端把数据包装成函数调用返回，前端提前定义好这个函数，脚本一加载就自动执行。

JSONP 只支持 GET 请求

因为本质是动态插入 <script src="..."></script>，只能发 GET。不能传 body，也不能设自定义请求头，更没法拦截或重试失败请求。

服务端必须接收一个 callback 参数（比如 ?callback=handleData）
返回内容必须是合法 JS 代码：handleData({"name":"张三","age":25})
前端必须提前挂载 handleData 到 window 上，否则执行时报错

手动实现一个轻量 JSONP 函数

不用 jQuery，几行就能搞定：

function jsonp({ url, success, error }) {
  const cbName = 'jsonp_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
  window[cbName] = function(data) {
    success && success(data);
    delete window[cbName];
  };

  const script = document.createElement('script');
  script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + cbName;
  script.onerror = () => error && error('加载失败');

  document.head.appendChild(script);
}

调用方式：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

jsonp({
  url: 'http://api.example.com/data',
  success: data => console.log(data),
  error: msg => console.error(msg)
});

后端配合要点（以 Express 为例）

关键不是返回 JSON，而是返回可执行 JS 字符串：

app.get('/data', (req, res) => {
  const callback = req.query.callback;
  const data = { message: 'hello', time: new Date() };

  if (!callback) {
    return res.status(400).send('缺少 callback 参数');
  }

  res.type('application/javascript');
  res.send(`${callback}(${JSON.stringify(data)})`);
});

注意：