3. Webpack/Rspack 动态加载机制

现代前端构建工具（Webpack、Rspack）在实现代码分割和懒加载时，会通过 document.createElement('script') 动态创建 script 标签来加载 chunk。

如果这些动态创建的标签没有 crossorigin 属性，同样会导致 Script Error。

解决方案

我们采用了一套三层防护的解决方案：

方案架构图

HTML层：模板引用资源手动修改

对于 HTML 模板中直接引用的静态资源，我们手动添加 crossorigin="anonymous" 属性：

<!-- 所有跨域的 script 标签 -->
<script
  src="https://cdn.example.com/static/polyfill.min.js"
  defer
  crossorigin="anonymous"
></script>


<!-- 所有跨域的 link 标签（CSS） -->
<link
  rel="stylesheet"
  href="https://cdn.example.com/assets/iconfont.css"
  crossorigin="anonymous"
/>

打包工具层：Webpack/Rspack 插件自动处理（构建时）

对于构建工具自动插入的脚本和样式，我们创建了一个自定义插件：

class CrossOriginAssetsPlugin {
  apply(compiler) {
    const pluginName = 'CrossOriginAssetsPlugin';
    compiler.hooks.compilation.tap(pluginName, (compilation) => {
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      if (HtmlWebpackPlugin && HtmlWebpackPlugin.getHooks) {
        HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tap(
          pluginName,
          data => {
            // 处理 script
            data.assetTags.scripts.forEach(tag => {
              if (isCrossOrigin(tag.attributes?.src)) {
                tag.attributes.crossorigin = 'anonymous';
              }
            });
            // 处理 link
            data.assetTags.styles.forEach(tag => {
              if (isCrossOrigin(tag.attributes?.href)) {
                tag.attributes.crossorigin = 'anonymous';
              }
            });
            return data;
          }
        );
      }
    });
  }
}


function isCrossOrigin(url) {
  // 补充判断逻辑：绝对路径跨域、相对路径同源
  return url && /^https?:///.test(url);
}

异步加载层：运行时全局拦截（动态加载）

在业务开发中我们会遇到许多异步动态加载的脚本文件，通过拦截 document.createElement，为所有动态 script/link 节点设置跨域属性，无死角覆盖 chunk、第三方库等异步加载场景。

function isCrossOriginUrl(url: string | null | undefined): boolean {
  return !!url && /^https?:///.test(url);
}


export function setScriptCrossOrigin(script: HTMLScriptElement) {
  const src = script.src || script.getAttribute('src');
  if (isCrossOriginUrl(src)) script.crossOrigin = 'anonymous';
}


export function setLinkCrossOrigin(link: HTMLLinkElement) {
  const href = link.href || link.getAttribute('href');
  if (isCrossOriginUrl(href)) link.crossOrigin = 'anonymous';
}


export function initCrossOriginScriptHandler() {
  const originCreateElement = document.createElement.bind(document);
  document.createElement = function (tagName: string, options?: ElementCreationOptions) {
    const el = originCreateElement(tagName, options);
    if (tagName.toLowerCase() === 'script') {
      // 当 src 插入时才设置
      const observer = new MutationObserver(mutations => {
        mutations.forEach(m => {
          if (m.type === 'attributes' && m.attributeName === 'src') {
            setScriptCrossOrigin(el as HTMLScriptElement);
            observer.disconnect();
          }
        });
      });
      observer.observe(el, { attributes: true, attributeFilter: ['src'] });
    }
    if (tagName.toLowerCase() === 'link') {
      const observer = new MutationObserver(mutations => {
        mutations.forEach(m => {
          if (m.type === 'attributes' && m.attributeName === 'href') {
            setLinkCrossOrigin(el as HTMLLinkElement);
            observer.disconnect();
          }
        });
      });
      observer.observe(el, { attributes: true, attributeFilter: ['href'] });
    }
    return el;
  };
}

在应用启动处调用初始化:

为什么这个方案可以覆盖所有场景？

Webpack/Rspack 在运行时加载 chunk 时，会生成类似这样的代码：

// Webpack 生成的 chunk 加载代码
function loadChunk(chunkId) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');  // ← 关键
    script.src = chunkUrl;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

通过拦截 document.createElement，我们可以捕获所有通过此方式创建的 script 标签，包括：

• React.lazy 懒加载的组件

• 动态 import() 加载的模块

• Webpack chunk 动态加载

• 第三方库的动态加载

• 手动通过 loadScript() 加载的脚本

服务器端配置

后端需确保 CDN/stastic 资源的 HTTP 响应头允许跨源：

Nginx 配置样例（脱敏）

location /static/ {
  add_header 'Access-Control-Allow-Origin' '*' always;
  add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
  add_header 'Access-Control-Allow-Headers' 'Range' always;
  add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range' always;
  if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
    return 204;
  }
}

总结

通过这套三层防护的解决方案，我们成功解决了多域名架构下的跨域 Script Error 问题：

1. HTML层：手动为静态资源添加 crossorigin 属性

2. 打包工具层：Webpack 插件自动处理构建时插入的资源

3. 异步加载层：全局拦截 document.createElement，处理所有动态加载

参考文章：原文链接​