Question

我在WordPress后端上构建了一个ReactJS应用程序。 React App运行在同一个域中，嵌入在WordPress站点中。我所关注的大多数教程都介绍了如何从WordPress获取数据到React。我在这方面取得了成功，但需要弄清楚如何将数据从我的React应用程序提交到WordPress（最好是通过REST API）。

这将是登录编辑器的自定义管理页面，可以在管理面板中或从前端获得。

作为创建帖子的示例，我天真地尝试以下功能：

  saveGrid() {
    const url = "/wp-json/wp/v2/posts";
    const body = JSON.stringify({
      "title":"internet",
      "content":"teapot"
    });

    fetch(url, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body:body

    });
  }

我收到401未经授权的回复。授权自己提交POST的最简单方法是什么（首选安全解决方案）？

Answer 1

看起来你正走在正确的轨道上。

快速阅读本文：https://apppresser.com/wp-api-post-submission/ 告诉我你所遗失的只是一个＆＃34; nonce＆＃34;以便WP API成功识别并验证您的请求。

在上面的指南中，开发人员创建了一个用JQuery编写的JS，它将XHR / AJAX请求发送到WP API，在他们的plugin.php中，他们使用WP中的一些变量对脚本进行入队和本地化，以帮助处理内部的请求。 JS。

这里的内容是他们使用了wp_create_nonce('wp_rest')并将其分配给了本地化变量nonce，因此他们可以在JS中稍后引用，并将nonce分配给他们的X-WP-Nonce请求内的标头！

如果你进一步研究这个问题，你可能会找到一个合适的替代方案，因为我不完全确定你如何加载你的JSX文件，但是这个指南可能会派上用场。您的JSX脚本/文件：http://blog.milandinic.com/2015/12/01/using-react-jsx-in-wordpress/

更多信息

https://codex.wordpress.org/Function_Reference/wp_localize_script https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Answer 2

我能够解决这个问题，而不是使用React的直接发布请求，使用React之外的Jquery AJAX提交，它使用React中的表单中的数据。这导致请求包含必要的cookie（我不明白为什么会这样）

从建立在WordPress上的ReactJS应用程序发出POST请求

2 个答案: