当前位置：首页 > article >正文

JSONP处理跨域请求

article 2024/11/20 17:09:13

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)}`;

    // 构建请求 URL
    params = 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);
  });