Blazor Server列举本地HTML文件后创建可访问链接的方法

问题本质 #

你遇到的链接失效情况和Blazor框架无关，是所有现代浏览器的通用安全规则：只要当前页面通过HTTP/HTTPS协议加载，浏览器就会完全拦截页面内指向file://协议的本地路径跳转，这类请求会被直接阻断，最终加载出about:blank#blocked的空白页。

由于你的Blazor Server应用和待访问的HTML文件部署在同一台设备上，完全可以绕开浏览器的file://协议限制，通过应用自身中转文件访问，不需要修改第三方生成HTML的应用逻辑，也不需要调整浏览器的全局安全设置。

落地实现步骤 #

1. 替换页面内的链接生成逻辑
   去掉原有拼接file:///本地路径的代码，将所有文件链接改为指向Blazor应用自身的内部接口，不再依赖本地文件协议跳转。
   替换Index.razor中的链接拼接代码：

   private static string LoadFiles()
   {
       System.Text.StringBuilder sb = new System.Text.StringBuilder();
       var tempDir = @"C:\Temp";
       // 仅扫描路径下的HTML文件
       foreach (var file in System.IO.Directory.GetFiles(tempDir, "*.html"))
       {
           var fileName = Path.GetFileName(file);
           // 对文件路径做URL编码，避免特殊字符导致链接失效
           sb.AppendLine($"<a href=\"/serve-local?file={Uri.EscapeDataString(file)}\" target=\"_blank\">{fileName}</a><br/>");
       }
       // 原有文件夹展示逻辑保持不变
       foreach (var folder in System.IO.Directory.GetDirectories(tempDir))
       {
           sb.AppendLine($"<p>{folder}</p>");
       }
       return sb.ToString();
   }
   

2. 添加本地文件服务接口
   在Blazor Server项目的Program.cs入口文件中（.NET 6及以上版本的默认项目结构），在app.Run()语句之前注册一个最小API端点，负责读取C:\Temp下的指定文件并返回给浏览器，同时加入路径校验逻辑，防止恶意构造请求越权读取系统其他位置的文件：

   // 注册本地文件服务端点
   app.MapGet("/serve-local", (string file) =>
   {
       var baseTempDir = @"C:\Temp";
       // 解码请求中携带的文件路径
       var decodedPath = Uri.UnescapeDataString(file);
       var fullRequestedPath = Path.GetFullPath(Path.Combine(baseTempDir, decodedPath));
       
       // 安全校验：确保请求路径始终在C:\Temp目录范围内
       if (!fullRequestedPath.StartsWith(baseTempDir, StringComparison.OrdinalIgnoreCase))
       {
           return Results.NotFound();
       }
       if (!File.Exists(fullRequestedPath))
       {
           return Results.NotFound();
       }
       // 以HTML内容类型返回文件，浏览器会直接正常渲染页面
       return Results.File(fullRequestedPath, "text/html");
   });
   

3. 扩展接口适配HTML关联资源
   如果第三方生成的HTML文件中引用了同目录下的CSS、JS、图片等静态资源，不需要修改原HTML文件的代码，只需要扩展上述接口的返回逻辑：

   • 根据请求文件的后缀匹配对应的MIME类型（比如.css对应text/css、.js对应application/javascript、图片格式对应对应的资源类型）
   • 保证C:\Temp目录下的所有文件都能被接口正确返回，浏览器加载HTML时会自动拉取关联资源，最终展示效果和直接打开本地HTML文件完全一致。

注意事项 #

• 仅需给Blazor应用的运行账号分配C:\Temp目录的只读权限即可，不需要开放其他系统目录的访问权限
• 不建议通过修改浏览器配置放行file://协议的访问限制，这种方式需要为每个访问用户单独调整浏览器设置，维护成本极高，也无法适配跨设备访问场景
• 由于Blazor Server和HTML文件在同一设备上，接口读取本地文件的延迟极低，页面打开速度和直接访问本地文件的体验几乎没有差别

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