如何设置Express API让JWT仅对指定域名的Angular应用生效？

嘿，这个需求在前后端分离的场景里挺常见的，结合你用的Angular+Express+JWT技术栈，咱们可以通过先校验请求来源域名，再执行JWT验证的思路来实现，具体步骤如下：

1. 定义允许的域名白名单 #

首先，你需要明确哪些域名是合法的来源，比如生产环境的Angular域名、本地开发的localhost地址，把它们放进一个白名单数组里：

// 可以根据环境变量区分开发/生产环境的域名
const allowedOrigins = [
  'https://your-production-angular-app.com',
  'http://localhost:4200' // 本地开发环境必备
];

2. 编写来源校验中间件 #

在Express里，我们可以写一个自定义中间件，先检查请求的origin头（浏览器在CORS请求中会自动带上这个头，且无法被前端篡改，比referer更可靠）。如果来源不在白名单里，直接拒绝请求；如果合法，再进入JWT校验流程：

const validateOrigin = (req, res, next) => {
  const requestOrigin = req.headers.origin;
  
  // 处理特殊情况：如果是无origin的请求（比如Postman测试），可以根据需求决定是否允许
  if (!requestOrigin || allowedOrigins.includes(requestOrigin)) {
    // 来源合法，继续执行后续中间件（JWT校验）
    next();
  } else {
    // 来源非法，直接返回403禁止访问
    return res.status(403).json({ message: 'Forbidden: Request from unauthorized origin' });
  }
};

3. 组合中间件到API路由 #

把来源校验中间件放在JWT校验中间件的前面，确保只有合法来源的请求才会触发JWT验证：

// 假设你的JWT校验中间件是verifyJwt（比如用jsonwebtoken库实现的）
const verifyJwt = (req, res, next) => {
  // 你的JWT校验逻辑，比如解析Authorization头里的token
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) {
    return res.status(401).json({ message: 'Unauthorized: No token provided' });
  }
  // 验证token的逻辑...
  jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => {
    if (err) return res.status(401).json({ message: 'Unauthorized: Invalid token' });
    req.user = decoded;
    next();
  });
};

// 给需要JWT保护的API路由添加中间件
app.use('/api/protected', validateOrigin, verifyJwt, (req, res) => {
  // 你的受保护API逻辑
  res.json({ data: 'This is protected data' });
});

4. 同步配置CORS中间件 #

因为Angular是前端单页应用，必然会触发CORS请求，所以要确保Express的CORS配置和你的域名白名单一致，避免浏览器端的CORS错误：

const cors = require('cors');

app.use(cors({
  origin: allowedOrigins,
  credentials: true // 如果你的JWT存在Cookie中，需要开启这个；如果是放在Authorization头里，也建议开启
}));

一些关键注意事项 #

• 优先用req.headers.origin而非referer：referer可以被篡改，且部分浏览器会隐藏这个头，origin是浏览器在CORS请求中自动携带的，更可靠。
• 灵活处理无origin的请求：如果需要允许Postman等测试工具的请求，可以在校验逻辑里添加额外判断（比如检查请求的IP或者测试环境标识）。
• 配合环境变量管理白名单：生产环境和开发环境的域名不同，可以用process.env来动态加载，避免硬编码。
• OAuth2集成时的兼容：后续集成OAuth2时，要确保回调域名也加入白名单，避免授权流程被拦截。

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