自定义HTML表单POST提交遇Frappe CSRF Token错误及导入问题

1. 解决frappe is not defined问题 #

在你的signup.html中引入Frappe核心JS文件，两种方式任选：

• 直接引入静态资源：

<script src="/assets/frappe/js/frappe-web.min.js"></script>

• 用Frappe模板语法（推荐，适配资源版本）：

{{ include_script('frappe-web.min.js') }}

引入后即可全局访问frappe对象。

2. 正确处理CSRF Token，避免Invalid Request错误 #

Frappe要求POST请求必须携带有效的CSRF Token，有两种可靠的传递方式：

方式一：通过请求头传递 #

获取Token后，在POST请求的headers中添加X-Frappe-CSRF-Token：

document.querySelector('#signup-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // 获取表单数据
  const formData = new FormData(e.target);
  const payload = Object.fromEntries(formData);

  try {
    const res = await fetch('/api/method/account.api.handle_signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Frappe-CSRF-Token': frappe.csrf_token
      },
      body: JSON.stringify(payload)
    });
    const result = await res.json();
    // 处理提交结果
    console.log(result);
  } catch (err) {
    console.error('提交失败:', err);
  }
});

方式二：通过表单隐藏字段传递 #

在表单内添加隐藏字段，直接携带CSRF Token，无需手动处理请求头：

<form id="signup-form" method="POST" action="/api/method/account.api.handle_signup">
  <!-- 你的表单输入字段 -->
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  
  <!-- CSRF Token隐藏字段 -->
  <input type="hidden" name="csrf_token" value="{{ frappe.csrf_token }}">
  
  <button type="submit">提交</button>
</form>

3. 常见排查点 #

• 确保请求URL是同域地址，跨域请求需额外配置Frappe的CORS规则
• 检查会话是否有效，CSRF Token与当前会话绑定，会话过期会导致Token无效
• 使用fetch时，不要显式设置credentials: 'omit'，默认same-origin会自动携带会话Cookie

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