Vite项目Firefox中WebFont加载报错：downloadable font: rejected by sanitizer

问题根源 #

Firefox对字体资源的Content-Type响应头校验比Chrome严格得多，要求woff/woff2字体必须返回标准的MIME类型（font/woff、font/woff2）。但默认Vite开发服务器未给这些字体文件配置正确的MIME类型，导致返回的是application/octet-stream这种通用类型，触发Firefox的安全校验机制，直接拒绝加载字体。

具体修复方法 #

1. 配置Vite的MIME类型映射 #

修改项目根目录下的vite.config.js，在server配置里添加字体的MIME类型映射，确保服务器返回正确的响应头：

export default defineConfig({
  plugins: [],
  server: {
    port: 3000,
    mime: {
      'font/woff': ['woff'],
      'font/woff2': ['woff2']
    }
  }
});

2. 核对字体文件路径 #

确认你的字体文件确实放在public/fonts/文件夹下，和CSS里url("fonts/OpenSans-Regular.woff2")的路径完全匹配。路径错误也可能间接导致资源加载异常，引发类似报错。

3. 备选方案：用中间件强制设置响应头 #

如果上面的MIME配置没生效，可以通过自定义中间件手动给字体文件设置Content-Type：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
  server: {
    port: 3000,
    setupMiddlewares(middlewares) {
      middlewares.use((req, res, next) => {
        if (req.url.endsWith('.woff')) {
          res.setHeader('Content-Type', 'font/woff');
        } else if (req.url.endsWith('.woff2')) {
          res.setHeader('Content-Type', 'font/woff2');
        }
        next();
      });
      return middlewares;
    }
  }
});

验证是否修复 #

重启Vite服务（重新执行npm start），刷新Firefox页面，看看控制台的报错是否消失。也可以打开浏览器的网络面板，查看字体文件的响应头，确认Content-Type已经是font/woff或font/woff2。

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