关于前端:前端JSONP解决跨域

生成随机回调函数名，防止回调函数名雷同造成获取返回数据凌乱

const makeCallbackName = () => {const timestamp = Date.now();
  const randomNum = Math.round(Math.random() * 1000);
  return `callback_${timestamp}_${randomNum}`;
}

jsonp 解决跨域

export const jsonpReq = () => {
  // 接口申请地址
  const reqInterface = 'xxxxx'
  const callbackName = makeCallbackName();

  try {return new Promise((resolve, reject) => {
       // 后端调用 callback 返回数据
      window[callbackName] = (result: any) => {resolve(result);
      }
      const JSONP = document.createElement('script');
      JSONP.type = 'text/javascript';
      JSONP.src = `${reqInterface}?callback=${callbackName}`;
      document.body.appendChild(JSONP);
      setTimeout(() => {document.body.removeChild(JSONP)
      }, 100)
    })
  } catch (error) {console.log('JSONP error-----', error);
  }
};

应用

const getJsonpData = async () => {const res = await jsonpReq();
   console.log('res----', res)
}