Rest API: trouble receiving response through script (browser and Postman display correctly)

Question

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?

Answer 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()=====`));
    };