跨域部署Blazor WASM自定义元素并在SPA中调用的问题

核心问题分析 #

跨域加载失败本质是Blazor WebAssembly默认依赖当前页面域名作为资源加载基路径，跨域场景下无法自动识别资源实际来源，再加上你引用代码里的格式错误，导致资源无法正确获取。

分步解决方案 #

1. 修正资源引用的语法错误 #

你的引用代码存在两处明显问题：

• <link rel="urlexample/stylesheet" ...>：rel属性值错误，必须为stylesheet，且href需填写完整跨域URL
• <script src="urlexample/appsettings.json"></script>：appsettings.json是配置文件，不能用script标签加载，Blazor不会解析这种配置方式

2. 手动指定Blazor资源基路径（关键步骤） #

跨域场景下必须手动告知Blazor资源所在域名，操作如下：

• 加载blazor.webassembly.js时添加autostart="false"，禁止自动初始化
• 编写手动初始化脚本，指定baseUrl为你的Blazor项目部署域名

3. 确保跨域资源共享（CORS）配置正确 #

如果使用Netlify这类静态服务，需确认CORS规则允许目标域名的请求：

• 可通过Netlify根目录的_headers文件配置，示例：

  /*
    Access-Control-Allow-Origin: https://你的目标域名.com
  

  生产环境不建议用*允许所有域名，需指定具体目标域名

4. 修正后的完整调用代码示例 #

<!-- 加载Blazor核心脚本，禁止自动启动 -->
<script src="https://你的Netlify域名/_framework/blazor.webassembly.js" autostart="false"></script>

<!-- 手动初始化Blazor，指定资源基路径 -->
<script>
  Blazor.start({
    config: {
      baseUrl: "https://你的Netlify域名/"
    }
  });
</script>

<!-- 加载自定义元素依赖脚本 -->
<script src="https://你的Netlify域名/_content/Microsoft.AspNetCore.Components.CustomElements/Microsoft.AspNetCore.Components.CustomElements.lib.module.js"></script>

<!-- 加载样式文件 -->
<link rel="stylesheet" href="https://你的Netlify域名/css/main.css" />

<!-- 加载图片资源 -->
<img src="https://你的Netlify域名/img/01fondo.png" alt="Background Image" />

<!-- 手动加载appsettings.json（可选） -->
<script>
  // 如需使用配置，手动fetch后存入全局变量供组件调用
  fetch("https://你的Netlify域名/appsettings.json")
    .then(res => res.json())
    .then(config => window.blazorAppConfig = config);
</script>

额外注意事项 #

• 不要复制_framework和_content到目标项目，跨域加载才是可维护的正确方案
• 确保Blazor项目发布时，所有资源（_framework、_content、静态文件）都正确部署到Netlify
• 确认自定义元素已在Program.cs中注册，示例：builder.RootComponents.RegisterCustomElement<你的组件>("自定义元素标签名")

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