跳至主要內容

14. JSONP

鸭梨小于 1 分钟

14. JSONP

<script> 标签不受同源策略约束,所以可以用来进行跨域请求,优点是兼容性好,但是只能用于 GET 请求:

/* eslint-disable no-prototype-builtins */
export function jsonp({ callbackName, params, url }) {
  const generateUrl = () => {
    let dataSrc = ''
    for (const key in params) {
      if (params.hasOwnProperty(key))
        dataSrc += `${key}=${params[key]}&`
    }
    dataSrc += `callback=${callbackName}`
    return `${url}?${dataSrc}`
  }
  return new Promise((resolve) => {
    const scriptEle = document.createElement('script')
    scriptEle.src = generateUrl()
    document.body.appendChild(scriptEle)
    window[callbackName] = (data) => {
      resolve(data)
      document.removeChild(scriptEle)
    }
  })
}