如何验证Angular5向Express发送的API请求来源合法性？

刚好之前做Angular+Express项目时碰到过类似的需求，给你分享几个实用的方案，从基础到进阶都有，你可以根据自己的场景选择：

1. 配置CORS（最基础的同源限制） #

浏览器自带的同源策略是第一道防线，你可以在Express服务端配置CORS，只允许你的Angular应用域名访问API。

首先安装cors依赖：

npm install cors

然后在Express项目里配置：

const cors = require('cors');

// 开发环境用你的Angular默认地址，生产环境换成实际部署的域名
const corsOptions = {
  origin: 'http://localhost:4200',
  optionsSuccessStatus: 200
};

// 把CORS中间件挂载到Express应用
app.use(cors(corsOptions));

⚠️ 注意：这个方法只能拦截浏览器发起的跨域请求，如果有人用Postman、curl这类工具绕过浏览器直接调用API，CORS就起不到作用了，所以需要配合其他验证手段。

2. 自定义请求头验证（应用级密钥） #

在Angular的HTTP请求里加一个自定义的请求头，比如X-App-Key，然后在Express端校验这个密钥的正确性，相当于给你的API加了一把“应用专属钥匙”。

Angular端修改请求： #

// 导入HttpHeaders
import { HttpHeaders } from '@angular/common/http';

// 建议把密钥放在环境变量里，不要硬编码！
const appKey = environment.appSecretKey;
const headers = new HttpHeaders({
  'X-App-Key': appKey
});

// 发起请求时带上这个头
this.http.get('http://localhost/api/?products=all', { headers });

你可以在src/environments/environment.ts里配置环境变量：

export const environment = {
  production: false,
  appSecretKey: '你的随机长字符串密钥'
};

生产环境用environment.prod.ts，构建时会自动替换，避免密钥泄露。

Express端验证密钥： #

// 建议把密钥存在系统环境变量里，不要写在代码里
const validAppKey = process.env.APP_SECRET_KEY;

app.use((req, res, next) => {
  const incomingKey = req.headers['x-app-key'];
  
  if (!incomingKey || incomingKey !== validAppKey) {
    return res.status(403).json({ message: '非法请求来源' });
  }
  // 验证通过，继续处理请求
  next();
});

这个方法能过滤掉大部分非你的应用发起的请求，即使对方用工具调用，也得知道密钥才行。

3. 结合用户认证（适合需要登录的场景） #

如果你的应用需要用户登录才能查看产品数据，那可以用JWT或者Session来验证请求合法性。用户登录后，Angular端存储认证令牌，每次请求都带上，Express端校验令牌是否有效。

Angular端带JWT请求： #

// 从本地存储获取登录时拿到的JWT令牌
const authToken = localStorage.getItem('authToken');
const headers = new HttpHeaders({
  'Authorization': `Bearer ${authToken}`
});

this.http.get('http://localhost/api/?products=all', { headers });

Express端验证JWT： #

const jwt = require('jsonwebtoken');
const jwtSecret = process.env.JWT_SECRET;

app.use((req, res, next) => {
  const authHeader = req.headers.authorization;
  
  // 检查请求头里是否有Bearer令牌
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ message: '未授权访问' });
  }
  
  const token = authHeader.split(' ')[1];
  try {
    // 验证令牌有效性
    const decoded = jwt.verify(token, jwtSecret);
    // 可以把用户信息挂载到请求对象，后续接口用
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(403).json({ message: '无效的认证令牌' });
  }
});

这个方法不仅能验证请求来源，还能控制用户权限，适合有登录功能的应用。

4. 辅助手段：检查Referer头（仅作补充） #

可以检查请求的Referer头是否来自你的Angular域名，但这个头可以被伪造，所以只能作为辅助验证，不能单独依赖：

app.use((req, res, next) => {
  const referer = req.headers.referer;
  // 检查Referer是否以你的Angular域名开头
  if (referer && referer.startsWith('http://localhost:4200')) {
    next();
  } else {
    return res.status(403).json({ message: '非法请求来源' });
  }
});

总结 #

• 开发环境用CORS配置就足够了；
• 生产环境建议CORS + 自定义请求头验证组合使用，安全系数更高；
• 如果有用户登录功能，再加上JWT认证，既能验证请求，又能管理用户权限；
• 永远不要把敏感密钥硬编码在客户端代码里，用环境变量管理才安全。

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