JSONP

背景

由于浏览器存在安全策略，所以当访问的请求中的协议、域名、端口其中一个与本站不同时就会形成跨域，这里介绍一种比较简单的方案——jsonp。

原理

浏览器对 script、img这些带有src属性的的标签在发送请求时是不会触发跨域的校验，所以可以通过script 发送一个请求，并在这个请求url中带上前端本地的回调函数名，由后端返回的脚本中执行该方法，并把数据传到该方法中。

function ajaxJsonp(url, params) {return new Promise((resolve, reject) => {// 创建一个唯一的回调函数名const callbackName = `jsonpCallback${Math.random().toString(36).substr(2, 9)}`;// 构建请求 URLparams = params || {};params.callback = callbackName;const queryString = new URLSearchParams(params).toString();const fullUrl = `${url.indexOf("?") !== -1 ? url + "&" + queryString : url + "?" + queryString}`;// const handelUrl = handleUrlByGet(params, fullUrl);// 创建 <script> 标签并设置 src 属性const script = document.createElement("script");script.src = fullUrl;// 定义全局回调函数window[callbackName] = (data) => {resolve(data);document.head.removeChild(script);delete window[callbackName];};// 监听脚本加载错误script.onerror = () => {reject(new Error("JSONP request failed"));document.head.removeChild(script);};// 将 <script> 标签添加到文档中document.head.appendChild(script);});