如何将 Wagtail 表单用于无头 CMS？（没有模板）答案

【问题标题】：How can I use Wagtail Forms for a Headless CMS? ( without Template )如何将 Wagtail 表单用于无头 CMS？（没有模板）
【发布时间】：2021-06-16 23:21:13
【问题描述】：

根据文档，Wagtail API 是只读的（不允许使用 POST 方法）。因此，使用来自Sidebar Menu 的表单的唯一方法是using Templates，因此客户端能够在内部针对 API 发出 post 请求。但这不是无头的。要成为无头 API，必须能够通过提供 URL 来接收表单数据。

Wagtail Docs - API

“Wagtail API 模块公开了一个公共的、只读的、JSON 格式的 API，可供外部客户端（例如移动应用程序）或网站的前端使用。”

...

在这一点上，我没有丝毫线索，这意味着我不得不重新考虑我的堆栈，尽管到目前为止，我对 Wagtail 作为无头 CMS 和 Nuxt 作为客户端非常满意。任何避免这种措施的想法都会非常受欢迎。

更新 - 对 Wagtail API v2 的 Nuxt POST 请求

pages/index.vue

<template>
...
</template>

<script>
export default {
  components: {
  },
  async asyncData ({ $axios, req }) {
    const pageHome = await $axios.$get('https://foo.bar.com/api/v2/pages/3/')
    return { pageHome }
  }
</script>

【问题讨论】：

您找到解决方案了吗？我面临同样的问题。 GET 表单很容易作为标准页面。不知道如何POST。
@JunmingWang 出于开发目的，只需禁用 CSRF 中间件，这样您就可以在没有 Token 的情况下POST。对于生产环境，必须安装 Django CSRF 机制，这需要一些时间。

标签： django wagtail headless-cms wagtail-apiv2

【解决方案1】：

我喜欢你研究的深度，但我认为你不一定要彻底改变你的筹码。我使用完全相同的技术，但在表单上你必须使用简单的 Django Rest Framework serializers & generic class based views 来处理常见的情况，例如 ListCreateAPIView and RetrieveUpdateDestroyAPIView 进行繁重的工作。

尽管这种方法涉及大量编码，但您最好还是编写自己的 API 视图来处理表单数据，并且不需要新的插件来实现它。

事后考虑，如果您需要表单附件，您可以使用 flexible method 创建表单模型并在 excel 或 csv 中获取表单响应，您可以使用 Django Admin Import/Export。

我希望这消除了您扔掉婴儿和洗澡水的需要。

【讨论】：

这看起来是一个可靠的方法，所以我会仔细研究一下。但我也发现 POST-Requests 不起作用，因为它们没有 CSRF-Cookie 集。希望这意味着我不必对代码进行太多更改。
您是像普通的 HTML fmutli-part orm 一样发布还是使用 Django Rest Framework - django-rest-framework.org 执行实际的 REST POST 调用？
在上面我将来自 Nuxt 客户端的请求添加到 Wagtail API（由于缺少 CSRF-Token 而失败；403: Forbiden）。此 API 基于 Django API。请求标头设置为 content-type: applicatoin/json。当使用常规的非无头 Wagtail 表单（效果很好； 200 ）时，内容类型设置为 application/x-www-form-urlencoded。想想当 CSRF 设置正确时，我还必须调整请求标头，所以看起来这个已经内置了。
您能否发送代码示例，我无法理解您的意思。
正如预期的那样，请求标头（来自具有不同 URL 的客户端）必须像来自 Django 模板的请求一样设置（如果它不是无头 cms）。这意味着 content-type 使用拟合数据方案设置为 application/x-www-form-urlencoded。但那是偶然的。主要是关于建立 CSRF 机制。我的大胆想法（用于生产）是将 CSRFToken（由 Django 创建）存储在环境变量中，由 Nuxt-Client 获取并用于授权（在执行POST 请求时）