NextJS 13如何隐藏API响应，防止用户查看？

以下是几种实用的方法，可组合使用来实现你的需求：

1. 验证请求来源（Referer/Origin 头） #

在后端检查请求的Referer或Origin字段，仅允许自身域名的请求通过。这能拦住普通用户直接在浏览器地址栏访问API，以及大部分简单跨域请求。

示例（Node.js/Express）：

app.use('/api/post', (req, res, next) => {
  const allowedDomain = 'https://your-website-domain.com';
  const requestSource = req.headers.origin || req.headers.referer;
  
  // 验证来源是否匹配
  if (!requestSource || !requestSource.startsWith(allowedDomain)) {
    return res.status(403).send('Forbidden');
  }
  next();
});

注意：请求头可被伪造，需配合其他方法提升安全性。

2. API密钥验证 #

生成唯一的API密钥，让自身站点在请求时携带该密钥（放在自定义请求头如X-API-Key），后端验证密钥合法性。

示例（Node.js/Express）：

const VALID_API_KEY = 'your-unique-secret-key';

app.use('/api/post', (req, res, next) => {
  const incomingKey = req.headers['x-api-key'];
  if (!incomingKey || incomingKey !== VALID_API_KEY) {
    return res.status(403).send('Forbidden');
  }
  next();
});

注意：密钥不能硬编码在前端源码中，可通过后端渲染页面时注入，或使用安全的环境变量管理。

3. CORS 域名限制 #

配置后端的CORS策略，仅允许自身域名发起跨域请求，阻止其他网站通过浏览器调用你的API。

示例（Node.js/Express 配合cors中间件）：

const cors = require('cors');
const corsOptions = {
  origin: 'https://your-website-domain.com',
  optionsSuccessStatus: 200
};

app.use('/api/post', cors(corsOptions), (req, res) => {
  // API业务逻辑
});

4. 请求签名验证 #

这是比API密钥更安全的方式，通过生成请求签名防止篡改和重放攻击：

• 前端请求时，将请求参数、当前时间戳与密钥组合后生成哈希签名（如HMAC-SHA256）
• 后端先验证时间戳是否在有效期内（比如5分钟），再用相同规则重新计算签名并对比

示例思路代码：

// 前端生成签名
const timestamp = Date.now().toString();
const params = JSON.stringify(reqBody);
const signature = crypto.createHmac('sha256', secretKey)
  .update(`${timestamp}${params}`)
  .digest('hex');

// 请求时携带 timestamp 和 signature 头
// 后端验证
app.use('/api/post', (req, res, next) => {
  const timestamp = req.headers['x-request-timestamp'];
  const signature = req.headers['x-request-signature'];
  const params = JSON.stringify(req.body);
  
  // 检查时间戳有效期
  if (Date.now() - parseInt(timestamp) > 5 * 60 * 1000) {
    return res.status(403).send('Request expired');
  }
  
  // 重新计算签名对比
  const validSignature = crypto.createHmac('sha256', secretKey)
    .update(`${timestamp}${params}`)
    .digest('hex');
  
  if (signature !== validSignature) {
    return res.status(403).send('Invalid signature');
  }
  next();
});

5. 请求频率限制 #

即使有人绕过验证，也能通过限制请求频率减少滥用风险。

示例（Node.js/Express 配合express-rate-limit）：

const rateLimit = require('express-rate-limit');
const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15分钟窗口
  max: 100, // 每个IP最多100次请求
  message: '请求过于频繁，请稍后再试'
});

app.use('/api/post', apiLimiter);

总结 #

没有绝对能完全阻止所有外部访问的方法，但组合使用上述多种策略，可大幅提升API的访问难度，满足你仅允许自身站点调用的需求。

内容的提问来源于stack exchange，提问作者Gabriel Santos Lemos