REST API:无法通过脚本接收响应(浏览器和邮递员正确显示)

时间:2019-07-15 作者:Sean D

我制作了一个简单的插件来练习与WP Rest API的连接。测试get请求以http://localhost/wptest2/?rest_route=/wp/v2/posts/1 在浏览器中并使用Postman,我可以看到默认的“Hello World”帖子数据。然而,使用下面的插件测试fetch时,我在Chrome控制台中得到了以下响应:

// 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"
这是插件文件(完整)

<?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\');
取消对mode和Allow Access Control Remote Origin头的注释没有任何作用,我认为这些行不会适用于当前问题。

我还尝试从URL中删除“wp/v2/posts/1”。使用fetch请求时,Chrome控制台中的响应是相同的。但是,通过浏览器或邮递员发出的get请求正确显示了一个大对象

其他详细信息

我在一个Chrome选项卡中登录到wordpress的管理仪表板区域。我的浏览器已启用Cookie,并且可以使用chrome扩展查看这些Cookie:wordpress_logged_in, wordpress_settings, wordpress_settings_time, wordpress_test_cookie

但是当我去http://localhost/wptest2/?rest_route=/wp/v2/users/me 我得到了纯文本json:{"code":"rest_not_logged_in","message":"You are not currently logged in.","data":{"status":401}}

我的安装在本地机器上,运行Lubuntu 18.04,带有Apache2和Wordpress 5.2。安装路径是/var/www/html/wptest2,我可以在http://localhost/wptest2

你知道为什么我的请求没有得到所需数据的响应吗?

1 个回复
SO网友:Sean D

通过添加解决。json()响应如下:

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