Blazor Server应用使用本地Google Material Icons遇安全错误求助

问题根源 #

• 你使用file:///协议引用字体文件，浏览器的安全策略禁止从HTTPS/HTTP网页加载本地file://协议的资源，这直接触发了跨域安全错误。
• Blazor Server的静态资源（包括字体）必须通过Web服务器的相对路径访问，而非直接读取本地文件系统。

修复步骤 #

1. 保持字体文件在wwwroot/css目录不变，修改CSS中@font-face的src为相对路径：

   @font-face {
   font-family: 'Material Icons Outlined';
   font-style: normal;
   font-weight: 400;
   /* CSS与字体文件同目录，直接用文件名即可 */
   src: url('gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2') format('woff2');
   }
   
   .material-icons-outlined {
   font-family: 'Material Icons Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
   }
   

2. 确认_host.cshtml中的CSS引用无误：

   <link href="css/material_fonts.css" rel="stylesheet" />
   

修改后，浏览器会通过Web服务器的合法路径加载字体文件，不再触发安全限制。

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