<!-- 所有跨域的 script 標(biāo)簽 -->
<script
  src="https://cdn.example.com/static/polyfill.min.js"
  defer
  crossorigin="anonymous"
></script>

<!-- 所有跨域的 link 標(biāo)簽（CSS） -->
<link
  rel="stylesheet"
   rel="external nofollow" 
  crossorigin="anonymous"
/>

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) {
  // 補(bǔ)充判斷邏輯：絕對(duì)路徑跨域、相對(duì)路徑同源
  return url && /^https?:///.test(url);
}

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') {
      // 當(dāng) src 插入時(shí)才設(shè)置
      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 生成的 chunk 加載代碼
function loadChunk(chunkId) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');  // ← 關(guān)鍵
    script.src = chunkUrl;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

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