React+Redux应用如何仅允许合法referer访问？.htaccess适配Node.js吗？

1. .htaccess在Node.js环境的生效情况 #

.htaccess是Apache、OpenLiteSpeed等Web服务器专属的目录级配置文件，原生Node.js服务（包括Express、Koa等框架启动的服务）没有内置解析.htaccess的能力，直接跑Node.js服务的话原有规则完全不生效。
如果你的Node.js应用是通过Apache/Nginx反向代理对外提供服务，那可以继续沿用原有.htaccess规则，所有访问控制、重定向逻辑都交给前置的反向代理服务器处理即可，不需要修改Node.js侧代码。

2. 纯Node.js环境的等效实现方案 #

你可以用Express框架（大多数React全栈项目的默认后端框架）的中间件来实现完全等效的逻辑，步骤非常简单：

第一步：安装依赖 #

如果还没装express的话执行命令：
npm install express

第二步：编写服务逻辑 #

核心逻辑分两块：域名重定向、合法来源校验，参考代码如下：

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

// 1. 域名重定向逻辑，等效原有Rewrite规则
app.use((req, res, next) => {
  const allowedHost = 'www.subdomain.domain.com';
  // 忽略大小写匹配host
  if (req.hostname.toLowerCase() !== allowedHost && req.hostname !== '') {
    // 重定向到http://www.example.com对应路径
    return res.redirect(`http://www.example.com${req.originalUrl}`);
  }
  next();
});

// 2. 访问来源校验逻辑，等效原有deny/allow规则
app.use((req, res, next) => {
  // 合法referer，可根据需求扩展多个
  const allowedReferer = 'subdomain.domain.com';
  const referer = req.get('Referer') || '';
  // 校验referer是否包含合法域名
  if (referer.includes(allowedReferer)) {
    return next();
  }
  // 来源不合法返回403
  return res.status(403).send('Access Denied');
});

// 托管React打包后的静态资源，替换成你自己的打包产物目录路径
app.use(express.static('build'));

// SPA路由回退，解决React前端路由刷新404的问题
app.get('*', (req, res) => {
  res.sendFile('build/index.html', { root: __dirname });
});

app.listen(PORT, () => {
  console.log(`服务已启动，端口：${PORT}`);
});

第三步：启动服务 #

把上面的代码存为server.js，执行node server.js即可生效。

补充说明 #

• referer本身是可以被伪造的，这个防护只能阻挡普通的恶意访问，核心敏感接口建议再加签名、Token校验等额外防护
• 如果你用的是Serverless平台部署React应用，可以直接用平台自带的重定向、访问控制配置规则，不需要自己写Node.js代码

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