如何在JS表单中添加CSRF-Token？添加后返回‘Page Expired’问题求助

嘿，我来帮你排查这个CSRF Token导致的「Page Expired」问题！这种情况基本都是Token的传递、获取或者后端验证环节出了岔子，咱们一步步来梳理解决：

• 先确认Token是否正确获取到
  很多后端框架会把CSRF Token嵌入页面的meta标签里，你得确保JS能正确读取到这个值。比如用这段代码检查：

  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
  console.log(csrfToken); // 打开控制台看看是不是有有效字符串，不是null/空
  

  如果控制台输出null，说明你的页面里没有正确渲染这个meta标签，得先让后端把Token输出到页面里。

• 请求头/表单字段要和后端要求匹配
  不同框架对CSRF Token的携带方式要求不一样：

  • 要是用AJAX/fetch提交，大多需要把Token放到请求头里，比如Laravel用X-CSRF-TOKEN，Django用X-CSRFToken：

    fetch('/submit-form', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': csrfToken // 这里的字段名必须和后端一致！
      },
      body: JSON.stringify({ /* 你的表单数据 */ })
    });
    

  • 要是用普通表单提交（动态生成表单的情况），得添加一个隐藏字段，字段名要对应后端要求，比如Laravel是_token，Django是csrfmiddlewaretoken：

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/submit-form';
    
    // 添加隐藏Token字段
    const tokenInput = document.createElement('input');
    tokenInput.type = 'hidden';
    tokenInput.name = '_token'; // 对应后端要求的字段名
    tokenInput.value = csrfToken;
    form.appendChild(tokenInput);
    
    // 添加其他表单字段...
    document.body.appendChild(form);
    form.submit();
    

• 检查Token是否过期或会话不匹配
  CSRF Token通常和用户会话绑定，要是页面打开太久，会话过期或者Token失效，就会触发「Page Expired」。试试刷新页面，重新获取Token再提交，看问题是否消失。

• 验证后端的CSRF中间件配置
  有时候问题出在后端：比如中间件没启用，或者验证逻辑有问题。你可以用Postman手动发送带正确Token的POST请求测试——如果Postman也返回过期，那得去检查后端的CSRF配置；如果Postman能成功，那就是前端传递Token的方式不对。

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