Express.js添加WOFF/WOFF2 MIME类型支持（Azure部署场景）

我完全明白你的困扰——开发环境一切正常，部署到Azure生产环境就遇到字体文件404，手动改web.config还会被Git发布覆盖，确实头疼。别担心，我们可以直接在app.js里配置MIME类型支持，让Azure自动生成正确的web.config设置，彻底解决这个问题。

方法一：扩展Express的MIME类型映射（推荐） #

Express的静态文件托管依赖mime模块识别文件类型并设置Content-Type响应头，但默认的MIME映射里没有包含WOFF和WOFF2字体。我们可以手动扩展这个映射，让所有静态文件请求自动应用正确的类型：

const express = require('express');
const mime = require('mime');

// 给WOFF和WOFF2字体添加对应的MIME类型
mime.define({
  'font/woff': ['woff'],
  'font/woff2': ['woff2']
});

const app = express();

// 托管静态文件，现在会自动使用上面定义的MIME类型
app.use(express.static('public'));

// 你的其他路由和服务器配置...

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

这个方法一劳永逸，所有静态文件的MIME类型识别都会遵循这个扩展配置，不仅解决字体问题，以后添加其他特殊文件类型也能轻松处理。

方法二：在静态托管中间件中手动设置响应头 #

如果你只想针对字体文件单独处理，可以用express.static的setHeaders选项，直接给WOFF/WOFF2文件设置正确的Content-Type：

const express = require('express');
const app = express();

app.use(express.static('public', {
  setHeaders: (res, filePath) => {
    // 检查文件后缀，设置对应MIME类型
    if (filePath.endsWith('.woff')) {
      res.setHeader('Content-Type', 'font/woff');
    } else if (filePath.endsWith('.woff2')) {
      res.setHeader('Content-Type', 'font/woff2');
    }
  }
}));

// 其他配置...

app.listen(process.env.PORT || 3000);

为什么这样能解决Azure的问题？ #

当你通过Git将代码发布到Azure时，Azure的Node.js部署环境会自动根据你的Express应用配置生成对应的web.config文件。通过在app.js中配置MIME类型，Azure会识别这些设置并在生成的web.config中添加正确的MIME映射，再也不用担心手动修改的配置被覆盖了。

另外别忘了确认你的字体文件确实放在了静态目录（比如示例中的public）下，路径和开发环境保持一致——既然开发环境没问题，这一步应该已经搞定了。

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