0

I made a simple plugin to practice connections to the WP Rest API. Testing a get request to http://localhost/wptest2/?rest_route=/wp/v2/posts/1 in browser and using Postman, I see the default "Hello World" post data. However testing the fetch using the plugin below, I get this response in Chrome console:

// options-general.php?page=xhr-link:190 
body: ReadableStream
locked: false
__proto__: ReadableStream
bodyUsed: false
headers: Headers
__proto__: Headers
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost/wptest2/?rest_route=/wp/v2/posts/1"

Here is the plugin file (in its entirety)

<?php

/*
Plugin Name: Xhr Link
*/


////// admin page setup //////

function basicPage() {
  echo "<h1>Admin Page</h1>";
  echo
  "<button
    onclick=fetchRestApiData()
  >Fetch</button>";

  $phpApiNonce = wp_create_nonce('wp_rest');
  ?>
  <script>
    // setup the nonce
    let apiNonce = <?php echo json_encode($phpApiNonce); ?>;

    // fetch to grab user info
    const fetchRestApiData = () => {
      fetch('http://localhost/wptest2/?rest_route=/wp/v2/posts/1', {
        method: 'get',
        // mode: 'cors',
        headers : {
          // 'Access-Control-Allow-Origin' : '*',
          'X-WP-Nonce' : apiNonce, 
        }
      })
        .then(response => console.log(response, `=====response=====`));
    };

  </script>
  <?php

}

function setupParams() {
  add_options_page('XHR Link', 'XHR Link', 'manage_options', 'xhr-link', 'basicPage');
}
add_action('admin_menu', 'setupParams');
  • Uncommenting the mode and Allow Access Control Remote Origin header doesn't do anything and I don't think those lines will apply to the current issue.

  • I have also tried removing 'wp/v2/posts/1' from the URL. The response was the same in Chrome console when using the fetch request. However a get request through the browser or Postman correctly displayed a large object

Other details

  • I am logged into the admin dashboard area of wordpress in one Chrome tab. My browser has cookies enabled and can see these cookies using a chrome extension: wordpress_logged_in, wordpress_settings, wordpress_settings_time, wordpress_test_cookie

  • But when I go to http://localhost/wptest2/?rest_route=/wp/v2/users/me I get the plaintext json: {"code":"rest_not_logged_in","message":"You are not currently logged in.","data":{"status":401}}

  • My install is on my local machine running Lubuntu 18.04 with Apache2 and Wordpress 5.2. The install path is /var/www/html/wptest2 which I can access in browser at http://localhost/wptest2

Any idea why my requests are not responding with the data I want?

1

Solved by adding .json() to the response like so:

const fetchRestApiData = () => {
      fetch('http://localhost/wptest2/?rest_route=/wp/v2/posts/1', {
          <config removed...>
      })
        .then(response => console.log(response.json(), `=====response.json()=====`));
    };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.