如何通过IIS URL Rewrite动态设置Blazor WASM的base href避免多实例重复修改

动态修改base href的实现方法 #

无需为每个实例单独修改打包后的index.html，可通过以下两种方式实现动态配置：

• 前端JS动态生成base标签
  直接删除index.html中固定的<base href="/" />代码，在<head>标签最顶部插入以下脚本，即可根据用户访问地址的前缀自动适配base路径：

  <script>
    const pathSegs = window.location.pathname.split('/');
    let baseHref = '/';
    // 匹配规则可根据你的实例前缀规则自定义调整
    if (pathSegs.length > 1 && pathSegs[1].startsWith('Instance')) {
      baseHref = `/${pathSegs[1]}/`;
    }
    const baseTag = document.createElement('base');
    baseTag.href = baseHref;
    document.head.appendChild(baseTag);
  </script>
  

  注意：该脚本必须放在所有CSS、JS资源加载标签之前，否则资源加载会默认使用根路径导致404

• IIS出站规则自动修改响应内容
  不需要修改应用任何代码，完全在反向代理层处理：在IIS的URL Rewrite模块添加入站规则的同时，新增出站规则，匹配响应内容类型为text/html的请求，将返回的index.html中的<base href="/" />自动替换为对应实例的前缀路径，可通过正则捕获路径前缀实现单条规则适配所有实例。

更优部署方案 #

推荐优先使用反向代理层统一处理的方案，优势是应用代码零侵入，一次打包可直接在所有实例部署，额外需要注意两个配置项：

• 静态资源路径全部使用相对路径（如images/logo.png），不要加根路径前缀/，Blazor会自动根据base标签拼接完整资源路径
• IIS反向代理规则需保留X-Forwarded-For、X-Forwarded-Proto请求头，若使用Blazor服务端交互能力，还需在Program.cs中添加转发头配置：

  builder.Services.Configure<ForwardedHeadersOptions>(options =>
  {
      options.ForwardedHeaders = ForwardedHeaders.All;
  });
  

  确保Blazor的NavigationManager等内置组件可以正确识别公网访问路径。

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