如何在无表单的POST响应中添加Lusca CSRF Token？基于Hackathon Starter模板

嘿，我来帮你搞定这个CSRF Token报错的问题！你不想用URL白名单/黑名单或者表单提交的方式，其实Lusca本身就支持更灵活的Token传递方式，下面给你两种实用方案：

方法1：通过请求头携带CSRF Token #

Lusca默认会自动生成CSRF Token，并且把它存在req.csrfToken()方法里，同时还会设置一个名为XSRF-TOKEN的Cookie到浏览器。你只需要让前端从Cookie中取出这个Token，然后在POST请求的请求头里添加X-XSRF-TOKEN字段，Lusca就会自动校验这个Token的有效性。

你的后端路由代码不用做任何修改，保持原样即可：

exports.postTest = (req, res) => {
  // 这里写你的业务逻辑
  res.json({ success: true, message: "POST请求处理成功" });
};

前端可以这样获取并携带Token（以fetch API为例）：

// 封装一个获取Cookie的小工具
const getCookie = (name) => {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
};

// 从Cookie中取出Lusca设置的XSRF-TOKEN
const csrfToken = getCookie('XSRF-TOKEN');

// 发送POST请求时在请求头带上Token
fetch('/test', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-XSRF-TOKEN': csrfToken
  },
  body: JSON.stringify({ yourData: 'test content' })
})
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.error('请求出错:', error));

方法2：服务端注入Token到页面（适用于服务端渲染场景） #

如果你的项目是服务端渲染（比如用EJS模板），可以在中间件里把CSRF Token注入到res.locals中，然后在页面的JS里直接使用这个Token，不用借助表单的隐藏字段。

首先在app.js里添加一个中间件（要放在Lusca配置之后）：

app.use((req, res, next) => {
  // 把生成的CSRF Token注入到响应 locals 中
  res.locals.csrfToken = req.csrfToken();
  next();
});

然后在你的模板文件（比如views/test.ejs）里，把Token存到JS变量中：

<script>
  // 直接从服务端渲染的变量中拿到CSRF Token
  const csrfToken = '<%= csrfToken %>';
</script>

之后发送POST请求时，同样可以选择在请求头携带X-XSRF-TOKEN，或者如果想把Token放在请求体里，只需要在Lusca的配置里指定校验的字段名（比如_csrf）：

// 在app.js的Lusca配置中修改
app.use(lusca.csrf({ key: '_csrf' }));

这样请求体里带上_csrf: csrfToken，Lusca也能正常校验。

重要提醒 #

别像你之前尝试的那样手动设置res.local = {_crf:"_crf"}，这种硬编码的Token是无效的——Lusca的CSRF Token是和用户会话绑定的，必须通过req.csrfToken()方法生成才有效。

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