关于乾坤加载子应用导致跨域?

问题: 加载百度地图 sdk 导致跨域

由此联想到的问题, 为什么乾坤可以劫持很多请求, 子应用的js和css资源加载都会被拦截到 ?

通常加载 script 的方式

• 通过script标签
• 通过动态创建 script 插入 html
  以上两种方式都不会造成跨域, 在 chrome 里面两者的请求归属于 js 资源, 并不是 fetch/xhr,

乾坤在请求子应用的时候, 会先拿到子应用的字符串, 经过一系列的处理将 js, css 等分类, 然后自行去请求相应的资源, 而请求资源的方式是通过 fetch api 来拿到资源的, 像 js 这种资源, 拿到字符串后会通过 eval 来执行代码字符，以此来注入相应的sdk或者插件, 在请求的过程中又做了请求劫持的操作, 所以造成了跨域的问题

乾坤加载子应用的方式(只说 加载 js 资源)

export function getExternalScripts(
  scripts,
  fetch = defaultFetch,
  errorCallback = () => {}
) {
  const fetchScript = (scriptUrl) => {
    // 通过fetch 获取js资源，如果有缓存从缓存拿
    // 略
  };

  return Promise.all(
    scripts.map((script) => {
      if (typeof script === "string") {
        if (isInlineCode(script)) {
          // 获取内联的js code
          return getInlineCode(script);
        } else {
          // fetch 获取外联的js code
          return fetchScript(script);
        }
      } else {
        // 上面说过了，processTpl 方法会处理各种js css资源，其中对于需要异步执行的js资源会打上async标识
        // 打上async标识的js资源，会使用requestIdleCallback延迟执行
        const { src, async } = script;
        if (async) {
          return {
            src,
            async: true,
            content: new Promise((resolve, reject) =>
              requestIdleCallback(() => fetchScript(src).then(resolve, reject))
            ),
          };
        }

        return fetchScript(src);
      }
    })
  );
}