一、准备工作：在WooCommerce后台生成API密钥 #

首先得开启WooCommerce的REST API权限，这是对接的基础：

• 登录WordPress后台，进入 WooCommerce > 设置 > 高级 > REST API
• 点击「添加密钥」，填写描述（比如“React前端对接”），选择关联用户（建议选管理员权限的账号），权限根据需求选「读/写」或「只读」
• 点击「生成密钥」，务必保存好生成的 Consumer Key 和 Consumer Secret，这两个是后续调用API的核心凭证

二、前端快速上手方案（仅用于开发测试） #

你提到的woocommerce-api是Node.js后端专属包，前端确实没法直接用。我们可以用浏览器原生的fetch或者更便捷的axios直接调用WooCommerce的REST API。

1. 安装依赖（可选，用axios更省心） #

npm install axios

2. 创建API请求工具 #

在React项目里新建src/utils/wooApi.js，统一管理API配置：

import axios from 'axios';

// 替换成你的WordPress站点地址
const baseUrl = 'https://your-wordpress-site.com/wp-json/wc/v3';
// 替换成你刚生成的密钥
const consumerKey = 'your-consumer-key';
const consumerSecret = 'your-consumer-secret';

// 生成Basic Auth认证头（Base64编码）
const authHeader = 'Basic ' + btoa(`${consumerKey}:${consumerSecret}`);

const wooApi = axios.create({
  baseURL: baseUrl,
  headers: {
    Authorization: authHeader
  }
});

export default wooApi;

3. 在React组件中调用API示例 #

比如做一个产品列表展示组件：

import React, { useState, useEffect } from 'react';
import wooApi from './utils/wooApi';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        // 调用WooCommerce API获取产品列表，可添加分页、筛选参数
        const response = await wooApi.get('/products', {
          params: {
            per_page: 12,
            status: 'publish'
          }
        });
        setProducts(response.data);
      } catch (err) {
        console.error('加载产品失败:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []);

  if (loading) return <div>产品加载中...</div>;

  return (
    <div className="product-grid">
      <h2>热门产品</h2>
      {products.map(product => (
        <div key={product.id} className="product-card">
          <h3>{product.name}</h3>
          <p className="price">${product.price}</p>
          {product.images.length > 0 && (
            <img 
              src={product.images[0].src} 
              alt={product.name} 
              className="product-img"
            />
          )}
        </div>
      ))}
    </div>
  );
}

export default ProductList;

⚠️ 关键安全提醒：
直接在前端暴露Consumer Key和Secret是极高风险操作，任何人都能拿到密钥修改你的WooCommerce数据。这个方案只适合本地开发测试，生产环境必须用中间层代理！

三、生产环境推荐：搭建Node.js中间层 #

我们可以写一个简单的Node.js后端服务，作为React和WooCommerce之间的代理，这样密钥只会保存在后端，前端完全看不到敏感信息。

1. 新建Node.js代理项目 #

mkdir woo-proxy && cd woo-proxy
npm init -y
npm install express woocommerce-api cors

2. 编写代理服务（server.js） #

const express = require('express');
const WooCommerceAPI = require('woocommerce-api');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

// 后端用woocommerce-api包对接WooCommerce
const WooCommerce = new WooCommerceAPI({
  url: 'https://your-wordpress-site.com',
  consumerKey: 'your-consumer-key',
  consumerSecret: 'your-consumer-secret',
  wpAPI: true,
  version: 'wc/v3'
});

// 代理获取产品的请求
app.get('/api/products', async (req, res) => {
  try {
    const response = await WooCommerce.getAsync('products', req.query);
    res.json(JSON.parse(response.body));
  } catch (err) {
    res.status(500).json({ message: '获取产品失败' });
  }
});

// 可以扩展更多接口，比如创建订单、获取用户信息等
app.post('/api/orders', async (req, res) => {
  try {
    const response = await WooCommerce.postAsync('orders', req.body);
    res.json(JSON.parse(response.body));
  } catch (err) {
    res.status(500).json({ message: '创建订单失败' });
  }
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`代理服务运行在 http://localhost:${PORT}`);
});

3. React前端调用代理接口 #

修改之前的src/utils/wooApi.js，指向代理服务地址：

import axios from 'axios';

const wooApi = axios.create({
  baseURL: 'http://localhost:5000/api' // 替换成你的代理服务线上地址
});

export default wooApi;

这样前端所有请求都通过中间层转发，完全不用担心密钥泄露问题。

四、常用API接口参考 #

• 获取产品列表：GET /products
• 获取单个产品详情：GET /products/{id}
• 获取订单列表：GET /orders
• 创建订单：POST /orders
• 获取产品分类：GET /products/categories

你可以根据业务需求，参考WooCommerce官方的REST API文档扩展更多功能。

内容的提问来源于stack exchange，提问作者Oleksandr Tatarinov