DEV Community

Cover image for Wordpress POST Request
Dennis Frijlink
Dennis Frijlink

Posted on

1

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay