DEV Community

Cover image for Wordpress POST Request
Dennis Frijlink
Dennis Frijlink

Posted on

Wordpress POST Request

At the moment I'm using Wordpress as a Headless CMS with the frontend using Nuxt.js. Most of the time I use Wordpress to write the data and Nuxt to fetch it into the client with the REST API of Wordpress (WP).

I'm currently working on a new blog. I made a coming soon page where users can subscribe to get notified when the blog is live. With the WP plugin JSON Basic Authentication, I succeed to make a POST request to the WP backend with Postman:
Postman example

However by implenting and trying the POST Request into the Nuxt frontend, the browser gives the error Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR. See image below:

submitSubscriber(email) {
        var clientId = "....";
        var clientSecret = "....";

        var authorizationBasic = window.btoa(clientId + ':' + clientSecret);

        var myHeaders = new Headers();
        myHeaders.append("Authorization", "Basic " + authorizationBasic);
        myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
        myHeaders.append("Cookie", "wordpress_test_cookie=WP+Cookie+check");

        var urlencoded = new URLSearchParams();
        urlencoded.append("fields[email]", "randomemail@hotmail.com");

        var requestOptions = {
          method: 'POST',
          headers: myHeaders,
          body: urlencoded,
          redirect: 'follow'
        };

        fetch("https://domainname.nl/wordpress/wp-json/wp/v2/subscribers", requestOptions)
          .then(response => response.text())
          .then(result => console.log(result))
          .catch(error => console.log('error', error));
}
Enter fullscreen mode Exit fullscreen mode

I tried using different forms of the request (like with axios) and also changed the .htaccess file of the Worpdress site to allow all origins (just for testing), but even that didn't work:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /wordpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wordpress/index.php [L]
</IfModule>
Enter fullscreen mode Exit fullscreen mode

Hopefully someone can help me and maybe explain where it goes wrong. Thanks in advance

Discussion (1)

Collapse
dualizeo profile image
Dualizeo

Hi, I think you will find your answer in this video if you follow along :D

Exploring The Wordpress REST API & React Integration
youtube.com/watch?v=fFNXWinbgro