呈现woo rest apI以作出反应

Question

我试图在我的rest站点上获得，我需要能够获取、放置和删除。

在阅读了文档之后，没有任何地方似乎提到了头问题，我的问题是，有一种方法可以在不使用nodejs cors的情况下使呈现反应，或者必须使用节点来呈现woo。

​

​

 woo.jsx
import { useEffect, useState } from "react";
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";


const api = new WooCommerceRestApi({
url: "https://example.com/",
consumerKey: "ck_xxxxxxxxxxxxxxxxxx",
consumerSecret: "cs_xxxxxxxxxxxxxxx",
 version: "wc/v3"
 });

const WooSolo =()=>{
const [orders, setOrders] = useState([]);

useEffect(() => {
 fetchOrders();
}, []);

 let fetchOrders = () => {
 api
.get("orders", {
  per_page: 20,
})
.then((response) => {
  if (response.status === 200) {
    setOrders(response.data);
   console.log(response.data);
   }
  })
   .catch((error) => {});
  };

   console.log(orders);
   return (
  <div>

 <h1>woo single site here</h1>

   </div>

  )
 }

export default WooSolo;

这是必须做的节点，以获得数据，然后传递到反应，请解释我如何。或者，如果有另一种方法来代替这种反应。

我以为这是因为我在使用本地主机，但是我部署在Heroku上，仍然不能用react渲染任何东西。

Answer 1

我认为问题在于WordPress安装上的CORS。您能否尝试将此添加到您的function.php文件中？将yourfrontenddomain替换到用作前端的域。

add_action('init', 'handle_preflight');
function handle_preflight() {
    $origin = get_http_origin();
    if ($origin === 'https://yourfrontenddomain') {
        header("Access-Control-Allow-Origin: yourfrontenddomain");
        header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
        header("Access-Control-Allow-Credentials: true");
        header('Access-Control-Allow-Headers: Origin, X-Requested-With, X-WP-Nonce, Content-Type, Accept, Authorization');
        if ('OPTIONS' == $_SERVER['REQUEST_METHOD']) {
            status_header(200);
            exit();
        }
    }
}
add_filter('rest_authentication_errors', 'rest_filter_incoming_connections');
function rest_filter_incoming_connections($errors) {
    $request_server = $_SERVER['REMOTE_ADDR'];
    $origin = get_http_origin();
    if ($origin !== 'https://yourfrontenddomain') return new WP_Error('forbidden_access', $origin, array(
        'status' => 403
    ));
    return $errors;
}