使用http-auth保护Express后台路径时的未授权POST请求问题

我之前用http-auth搭配Express保护后台路径时，也碰到过POST请求被拦截的坑，大概率是预检请求（OPTIONS）没被正确处理或者中间件顺序不对导致的，咱们一步步来搞定它：

核心原因 #

http-auth默认会拦截所有需要认证的请求，但POST属于非简单请求，浏览器会先发送一个OPTIONS预检请求，这个请求不会携带Authorization头，直接被http-auth拦截，导致后续的POST请求根本发不出去。

解决方案 #

1. 先放行OPTIONS预检请求 #

在auth中间件之前，添加一个处理OPTIONS请求的中间件，让预检能正常通过：

// 处理/back路径下的所有OPTIONS请求
app.options('/back/*', (req, res) => {
  // 如果是跨域场景，需要添加CORS头，同域的话至少返回200状态码
  res.header('Access-Control-Allow-Origin', 'https://example.com'); // 替换成你的域名
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  res.sendStatus(200);
});

2. 调整中间件顺序，确保auth覆盖所有/back请求 #

你的原代码里把auth.connect(base)和express.static放在同一条app.use里，这会导致只有访问静态文件的请求会经过认证，但POST请求（比如API接口）可能没被覆盖。要分开挂载，让auth先作用于所有/back路径：

const auth = require('http-auth');
// 初始化基础认证（这里用basic示例，你也可以用digest）
const base = auth.basic({
  realm: 'Backstage Access', // 认证提示语
}, (username, password, callback) => {
  // 替换成你的实际验证逻辑，比如从数据库查询用户
  callback(username === 'your-admin-user' && password === 'your-secure-password');
});

// 先让所有/back路径的请求经过auth认证
app.use('/back', auth.connect(base));

// 再挂载静态文件和API路由
app.use('/back', express.static('back'));

// 比如你的POST接口，放在auth之后就能被保护
app.post('/back/api/save-data', (req, res) => {
  // 处理POST请求逻辑
  res.json({ status: 'success', message: '数据已保存' });
});

3. 检查http-auth版本 #

如果上面的方法还是不行，可能是旧版本的http-auth对非GET请求处理有bug，尝试升级到最新版：

npm update http-auth

4. 验证请求头是否正确携带Authorization #

可以在浏览器开发者工具的Network面板里查看POST请求的请求头，确认是否包含Authorization字段（格式为Basic 编码后的用户名密码）。如果没有，可能是前端发送请求时没带上认证信息，需要在请求里手动添加。

测试方法 #

用curl测试POST请求，看看是否能正常通过认证：

curl -X POST -u admin:yourpassword https://example.com/back/api/save-data

如果返回正常响应，说明配置没问题了。

内容的提问来源于stack exchange，提问作者Félix Arnoult