如何从Node应用前端导出常量至后端POST路由中使用

看起来你遇到的核心问题是前端生成的验证码标识（rand）无法安全传递到后端进行验证，之前尝试的几种方法都因为前后端环境差异或代码依赖问题失败了。下面给你一个简单可行的方案，完全避开你遇到的这些坑：

最佳方案：使用隐藏表单字段传递rand值 #

这个思路很直接：在页面的表单里添加一个隐藏的输入字段，前端生成rand后把它赋值给这个字段，当用户提交表单时，rand会和其他表单数据一起发送到后端，后端直接从请求体里获取并对比即可。

步骤1：修改HTML表单，添加隐藏字段 #

在你的注册表单里加入一个隐藏的input，用来存储rand值：

<form action="/registration" method="POST">
  <!-- 你的其他表单字段（比如用户名、密码） -->
  <input type="text" name="captcha_input" placeholder="输入验证码">
  <!-- 新增隐藏字段 -->
  <input type="hidden" name="captcha_rand" id="captcha_rand">
  <button type="submit">提交</button>
</form>

步骤2：修改前端frontend.js，赋值隐藏字段 #

生成rand后，把它设置到刚才的隐藏字段中：

// some jquery...
$(function() { // ... });
//...
const names = ['abc123', 'qwe456', 'zxc789']
const rand = names[Math.floor(Math.random() * names.length)];
document.getElementById("captcha").src=`/img/captcha_${rand}.jpg`;
// 将rand值写入隐藏字段
document.getElementById("captcha_rand").value = rand;

步骤3：修改后端registration.js，获取并验证 #

从请求体中取出前端传来的captcha_rand和用户输入的captcha_input，进行对比：

post: async (req, res, next) => {
  // ...
  // 从POST请求体中获取两个值
  const { captcha_input, captcha_rand } = req.body;
  // 对比用户输入和随机生成的验证码标识
  if (captcha_input !== captcha_rand) {
    req.flash('captcha_wrong', 'Please enter the characters you see to continue.');
    res.redirect('/registration');
    return;
  }
  // 验证码验证通过，继续执行后续注册逻辑
}

为什么之前的方法失败？ #

帮你梳理一下之前尝试的问题根源：

• 方法1/2/3：后端直接引入前端JS文件是错误的思路——前端代码依赖浏览器环境的jQuery（$），后端Node.js环境没有浏览器的window对象和$变量，所以会报$ is not defined。即使解决了import的语法问题，jQuery的依赖问题依然无法解决。
• 方法4：localStorage是浏览器专属的存储API，后端Node.js环境根本没有这个对象，所以自然会报错。

可选优化：更安全的验证码方案（进阶） #

如果想要更高的安全性（避免恶意用户篡改隐藏字段的值），可以改成后端生成验证码标识的模式：

1. 用户加载注册页面时，后端生成rand，将其存入用户的Session中，同时返回验证码图片的URL给前端。
2. 用户提交表单时，后端从Session中取出rand，和用户输入的验证码对比。

这种方式下，rand不会暴露在前端，安全性更高，不过需要你调整现有前后端的交互逻辑。

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