jsonp的原理是使用script标签来实现跨域，因为script标签的的src属性是不受同源策略的影响的，因此可以使用其来跨域。一个最简单的jsonp就是创建一个script标签，设置src为相应的url，在url之后添加相应的callback，格式类似于 url?callback=xxx，服务端根据我们的callback来返回相应的数据，类似于res.send(req.query.callback + '('+ data + ')')，这样就实现了一个最简单的jsonp

补充

补充：JSONP 的核心思路是利用 <script> 标签的 src 不受同源策略限制的特性，由服务端把 JSON 数据"包"进一个 JS 函数调用里返回，浏览器拿到这段 JS 直接执行，即可拿到数据。完整流程：

  1. 客户端定义回调函数（如 jsonpCallback，通常挂到 window 上）；
  2. 动态创建 <script src="http://api.xxx.com/data?cb=jsonpCallback"> 追加到 head；
  3. 服务端收到请求后，把数据序列化为 jsonpCallback({...}) 字符串返回；
  4. 浏览器执行这段脚本，触发回调拿到数据。

缺点：仅支持 GET、存在安全隐患（任意 JS 会被执行）、错误无法捕获；现代项目通常改用 CORS 或代理。

function jsonp(url, params, callback) {
  const cbName = 'jsonp_' + Date.now()
  window[cbName] = callback
  const qs = Object.keys(params).map(k => `${k}=${params[k]}`).join('&')
  const script = document.createElement('script')
  script.src = `${url}?${qs}&callback=${cbName}`
  document.head.appendChild(script)
}

来源整理自：vue3js.cn 面试官系列