无法从 React 网站访问 Wordpress Api

Question

我在非常需要的时候来找你。我已经花了一个星期的时间来解决这个问题，但仍然无法弄清楚。请帮忙。

这是我想要做的：

我有一个 WordPress 网站 (http://test/test.wp/)，您可以在该网站上执行以下 API 登录后直接在浏览器中调用：

$.ajax({
  url: 'http://test/test.wp/wp-json/wp/v2/users/me',
  method: 'GET',
  beforeSend: function(xhr){
    xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
  }
}).done(function(response){
  console.log(response);
}).fail(function(response){
  console.log( response.responseJSON.message );
});

而且效果很好。你得到一个关于当前用户的Json（我只需要ID）

现在，我得到了另一个用 React (http://app.test) 编写的网站（子域），我正在尝试向 WordPress 发出几乎相同的 GET 请求以获取当前登录用户的 ID。

这些站点是相互关联的，我试图通过简单地获取 WordPress 中当前登录用户的 ID 并在反应子域中使用它来模仿 WordPress 和 React 之间的 SSO

为了实现这一点，我已经处理了 CORS，因此我可以毫无问题地从 React 向 WordPress 发出 GET 请求。我还与 React 子域共享了我的 WordPress wordpress_logged_in_cffb670352ad40cd796ad890d27ee701 cookie，因此我可以访问它（据我所知，这是让您进行身份验证所需的唯一 cookie）

综上所述，为什么我的 React 请求失败了？

    Axios({
    method: 'get',
    url: 'http://test/test.wp/wp-json/wp/v2/users/me',
    headers: {
        'X-WP-Nonce': '659cbfeec0', // <= It's needed to use the WP Api and it's correct. I mannually grabed it from WP with wpApiSettings.nonce

        withCredentials: true, // <= From what I understand is the only thing needed to send the `wordpress_logged_in_cffb670352ad40cd796ad890d27ee701`  cookie ???
    },
})
    .then(response => console.log(response))
    .catch(err => console.log(err));

那么为什么我得到的答案是 403（禁止访问）？:

    code: "rest_cookie_invalid_nonce"
data: {status: 403}
statusText: 'Forbidden'
message: "Cookie verification failed"

你可以说答案就在我收到的回复中，但我真的不知道为什么会这样。

请帮忙

绝望的编码员。

Answer 1

我在 Headers 中传递了 'with-Credentials'，因此没有在请求中发送 cookie。

正确的做法是：

Axios.get(
            'http://test/test.wp/wp-json/wp/v2/users/me',
            {
                withCredentials: true,
                headers: { 'X-WP-NONCE': 'Your_Nonce' },
            }
        )

无法从 React 网站访问 Wordpress Api

Can't acces the Wordpress Api from a React website

authentication

wordpress

nonce

reactjs

axios