如何通过OAuth 1.0a实现React与WooCommerce对接？解决CORS报错

核心原因 #

Postman不受浏览器同源策略限制，因此能正常发起请求；但React运行在浏览器环境中，跨域请求会被浏览器的安全机制拦截，这就是你遇到CORS错误的根本原因。以下是具体解决方案：

方案一：在WordPress端配置CORS支持 #

直接在WooCommerce所在的WordPress站点添加跨域允许规则，有两种实现方式：

1. 插件快速配置 #

安装并激活 WP CORS 或 Enable CORS 插件，在插件设置中：

• 允许你的React应用域名（如http://localhost:5173，根据实际服务端口调整）
• 勾选允许GET、POST等业务需要的请求方法
• 开启允许携带Authorization头的请求

2. 手动修改主题代码 #

在WordPress当前主题的functions.php文件末尾添加以下代码：

add_action('rest_api_init', function () {
    remove_filter('rest_pre_serve_request', 'rest_send_cors_headers');
    add_filter('rest_pre_serve_request', function ($value) {
        // 替换为你的React应用实际域名/地址
        header('Access-Control-Allow-Origin: http://localhost:5173');
        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Authorization, Content-Type');
        header('Access-Control-Allow-Credentials: true');
        return $value;
    });
});

方案二：React开发环境用反向代理（推荐开发阶段） #

开发阶段修改WordPress配置可能不便，可通过Vite的代理功能转发请求，规避跨域：

配置Vite代理 #

在项目根目录的vite.config.js中添加代理规则：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/wp-json': {
        target: 'http://localhost/wordpress',
        changeOrigin: true,
        secure: false // 本地HTTP站点需设为false
      }
    }
  }
})

修改React请求路径 #

将代码中的请求URL改为相对路径，由Vite自动转发：

const request_data = {
  url: '/wp-json/wc/v3/products', // 替换原绝对路径
  method: 'GET'
};

额外检查：OAuth签名逻辑 #

虽然Postman请求正常，但需确认代码中的密钥配置：

• WooCommerce的API密钥分为Consumer Key和Consumer Secret，你的代码中变量名customer_key和consumer_key疑似写反，需核对密钥对应关系
• 确保oauth-1.0a库的HMAC-SHA1哈希函数实现正确，当前代码中的哈希逻辑是符合要求的

验证步骤 #

1. 重启React开发服务器和WordPress服务
2. 打开浏览器控制台，确认CORS错误是否消失
3. 检查请求头是否携带正确的OAuth授权信息，响应是否返回产品数据

内容的提问来源于stack exchange，提问作者Robin Singh