Making POST request from ReactJS app built on WordPress

Question

I'm building a ReactJS app on top of a WordPress backend. The React App is running on the same domain, embedded in the WordPress site. Most of the tutorials I've been following cover how to get data from WordPress to React. I've been successful at this, but need to figure out how to submit data from my React app to WordPress (preferably via the REST API).

This will be a custom admin page for logged in editors, either available in the admin panel or from the front-end.

As an example to create a post, I'm naively trying the following function:

  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

    });
  }

I get back a 401 unauthorized response. What is the easiest way to authorize myself for a POST submission (secure solution preferred)?

It looks like I could use oAuth, but that seems unnecessary, because I'm not really a third party application. How do I communicate from WordPress to React back to Wordpress that I am a logged in editor? — Peter Breen
– Peter Breen, Commented Jan 10, 2018 at 22:02

Andrew Salib · Accepted Answer · 2018-01-10 22:22:36Z

1

It looks like you're on the right track.

A quick read of this: https://apppresser.com/wp-api-post-submission/ shows me that all you're missing is a "nonce" in order for the WP API to recognise and validate your request successfully.

In the guide above, the dev created a JS written in JQuery that sends XHR/AJAX requests to the WP API and in their plugin.php they enqueue and localize the script with some variables from WP to help with the request inside the JS.

The takeaway here is that they used wp_create_nonce('wp_rest')and assigned this to a localized variable nonce so they could easily reference that later inside the JS and assign nonce to their X-WP-Nonce header inside the request!

If you look into this further you might find a suitable alternative for you that will work as I'm not entirely sure how you're loading your JSX files but this guide may come in handy for you to enqueue your JSX scripts/files: http://blog.milandinic.com/2015/12/01/using-react-jsx-in-wordpress/

More information

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

answered Jan 10, 2018 at 22:22

Andrew Salib

1151 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Peter Breen Over a year ago

That's the exact article I was starting to work from. Good to know I'm on the right track. Thanks!

Andrew Salib Over a year ago

No worries, let us know if you have any success creating and using the nonce and if that resolves your 401 issue :)

Peter Breen Over a year ago

Getting closer. I generated the nonce using the method in apppresser tutorial. Then I set it to a window variable so React could see it. But now, I'm getting a 403 forbidden error saying that my nonce token doesn't match my cookie. I'm looking into this now.

Peter Breen Over a year ago

It looks like the problem is that my response header doesn't contain a cookie attribute. I'm working on an alternate fix using a form submitting through admin-post.php and the post request that generates has a cookie attribute.

Peter Breen Over a year ago

I'm giving up for the time being. I've got it working for my needs using admin-post.php instead of the API, which is fine because I'm doing all my submissions from the admin panel anyways so I don't need verification.

|

Peter Breen · Accepted Answer · 2018-02-05 17:09:29Z

0

I was able to solve this problem by, instead of having a straight post request from React, using a Jquery AJAX submission outside of React that uses data from a form inside React. This caused the request to contain the necessary cookies (I don't understand exactly why this is the case)

answered Feb 5, 2018 at 17:09

Peter Breen

4471 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

Making POST request from ReactJS app built on WordPress

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related