Express使用csurf中间件报EBADCSRFTOKEN无效csrf token错误求助

可行解决方案 #

• 1. 补加express.urlencoded表单解析中间件
     你当前仅配置了express.json()解析JSON请求体，普通form表单默认提交的application/x-www-form-urlencoded类型请求体未被解析，导致后端取不到_csrf字段。请在express.json()之后添加以下配置：

app.use(express.urlencoded({ extended: true }));

• 2. 修复EJS模板中的标签闭合问题
     你模板内的3个input标签均未正确闭合，可能导致浏览器无法正确识别提交_csrf隐藏字段，修改后代码如下：

<form class="login-form" action="/login" method="POST" >
    <div class="form-control">
        <label for="email">E-Mail</label>
        <input 
            class="<%= validationErrors.find(e => e.param === 'email') ? 'invalid' : '' %>"
            type="email" 
            name="email" 
            id="email" 
            value="<%= oldInput.email %>" />
    </div>
    <div class="form-control">
        <label for="password">Password</label>
        <input 
            class="<%= validationErrors.find(e => e.param === 'password') ? 'invalid' : '' %>"
            type="password" 
            name="password" 
            id="password" 
            value="<%= oldInput.password %>" />
    </div>
    <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
    <button class="btn" type="submit">Login</button>
</form>

• 3. 调整multer中间件挂载范围
     你当前全局挂载了multer中间件，该中间件仅处理multipart/form-data类型的文件上传请求，全局挂载会干扰普通表单的请求解析。建议移除全局挂载，仅在需要上传文件的路由上单独引入：

// 移除全局的app.use(multer(...))配置，在需要上传的路由处单独使用
const upload = multer({ storage: fileStorage, fileFilter }).single("image");
app.post('/upload/path', upload, (req, res) => {
  // 处理上传逻辑
})

• 4. 可选：显式指定csurf的token提取位置
     如果调整后仍有问题，可以在初始化csrf保护时显式指定从body中取_csrf字段，避免默认规则异常：

const csrfProtection = csrf({
  value: (req) => req.body._csrf
});

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