DEV Community

loading...
Cover image for How to make a POST Request to Worpdress??

How to make a POST Request to Worpdress??

dennisfrijlink profile image Dennis Frijlink ・2 min read

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 (0)

pic
Editor guide