Blazor C#如何按需导入CDN文件 解决InvokeAsync导入CORS报错

问题原因 #

直接通过JS.InvokeAsync<IJSObjectReference>("import", "CDN地址")的方式加载跨域ES模块时，浏览器会强制校验目标资源的CORS响应头，amCharts官方CDN未对该场景配置Access-Control-Allow-Origin头，因此必然触发CORS拦截，该方式不可行。

单页面按需加载实现方案 #

利用Blazor的组件JS隔离+动态script标签注入的方式实现，完全满足仅指定页面加载、其他页面不加载资源的需求，且不会触发CORS问题：

• 利用Blazor原生的.razor.js组件隔离机制，页面专属JS逻辑只会在进入对应页面时加载，不会全局生效
• 动态创建普通<script>标签注入CDN地址，普通脚本加载不受ES模块的CORS规则限制
• 页面销毁时移除注入的脚本标签、清理全局对象，避免资源残留影响其他页面

具体代码实现

1. 对应页面（例如首页Index.razor）代码：

@page "/"
@inject IJSRuntime JS
@implements IAsyncDisposable

<PageTitle>首页</PageTitle>
<!-- 图表渲染容器 -->
<div id="chartdiv" style="width: 100%;height: 500px;"></div>

@code {
    private IJSObjectReference? _pageJsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 加载当前页面专属隔离JS模块
            _pageJsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./Pages/Index.razor.js");
            // 加载amCharts CDN资源
            var cdnLoaded = await _pageJsModule.InvokeAsync<bool>("loadAmChartsCdn");
            if (cdnLoaded)
            {
                // CDN加载完成后初始化图表
                await _pageJsModule.InvokeVoidAsync("initAmChart");
            }
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_pageJsModule is not null)
        {
            // 离开页面时清理CDN资源
            await _pageJsModule.InvokeVoidAsync("cleanupAmCharts");
            await _pageJsModule.DisposeAsync();
        }
    }
}

2. 同目录下创建隔离JS文件Index.razor.js（Blazor会自动识别该文件为Index组件的专属隔离JS）：

const AMCHARTS_CORE_CDN = "https://cdn.amcharts.com/lib/5/index.js";
// 如需加载其他附属模块，在这里追加CDN地址即可
const AMCHARTS_DEPENDENCIES = [
    // "https://cdn.amcharts.com/lib/5/xy.js",
    // "https://cdn.amcharts.com/lib/5/themes/Animated.js"
];
let insertedScripts = [];

export function loadAmChartsCdn() {
    // 资源已加载直接返回成功
    if (window.am5) return true;
    // 避免重复插入脚本标签
    const allCdnList = [AMCHARTS_CORE_CDN, ...AMCHARTS_DEPENDENCIES];
    allCdnList.forEach(src => {
        if (!document.querySelector(`script[src="${src}"]`)) {
            const script = document.createElement('script');
            script.src = src;
            insertedScripts.push(script);
            document.head.appendChild(script);
        }
    });

    return new Promise((resolve) => {
        // 等待最后一个依赖脚本加载完成
        const lastScript = insertedScripts.at(-1);
        if (!lastScript) {
            resolve(true);
            return;
        }
        lastScript.onload = () => resolve(true);
        lastScript.onerror = () => resolve(false);
    })
}

export function initAmChart() {
    // 此处编写amCharts初始化逻辑
    // const root = am5.Root.new("chartdiv");
    // 后续图表配置...
}

export function cleanupAmCharts() {
    // 移除所有注入的CDN脚本标签
    insertedScripts.forEach(script => script.remove());
    insertedScripts = [];
    // 清理window下的amCharts全局对象
    delete window.am5;
    // 若加载了其他附属模块，对应删除全局变量即可
}

注意事项

• 动态创建script标签时不要添加type="module"属性，否则会回到ES模块加载逻辑，再次触发CORS拦截
• 所有amCharts相关的初始化逻辑必须等CDN脚本加载完成后再执行，否则会触发变量未定义错误
• 不要在宿主HTML文件（index.html/_Host.cshtml）中全局引入amCharts脚本，否则所有页面都会加载该资源，达不到按需加载的效果

内容的提问来源于stack exchange，提问作者laurisstepanovs