Angular 4集成WooCommerce报错：TypeError: crypto.createHmac is not a function

问题根源 #

你碰到的这个报错，核心原因是你当前用的woocommerce-api库是为Node.js环境开发的——它依赖Node原生的crypto模块做OAuth签名，但浏览器环境里根本没有这个模块，所以调用crypto.createHmac时直接抛出了找不到方法的错误。

可行解决方案 #

推荐你换成官方维护的、支持浏览器环境的WooCommerce REST API客户端库@woocommerce/woocommerce-rest-api，步骤如下：

1. 安装适配浏览器的API库
   在项目根目录执行命令：

   npm install @woocommerce/woocommerce-rest-api --save
   

2. 修改组件代码逻辑
   替换掉原来的导入和API调用，示例代码如下：

   import { Component, OnInit } from '@angular/core';
   import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api';
   
   @Component({
     selector: 'app-pcat',
     templateUrl: './pcat.component.html',
     styleUrls: ['./pcat.component.scss']
   })
   export class PcatComponent implements OnInit {
     products: any[] = [];
     typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
   
     constructor() {}
   
     ngOnInit(): void {
       // 初始化WooCommerce API客户端
       const wooApi = new WooCommerceRestApi({
         url: '你的WooCommerce站点完整URL', // 例如：https://your-shop.com
         consumerKey: '你的消费者密钥',
         consumerSecret: '你的消费者秘钥',
         version: 'wc/v3' // 建议使用最新稳定API版本
       });
   
       // 请求产品列表
       wooApi.get('products')
         .then(response => {
           this.products = response.data;
           console.log('获取到的产品:', this.products);
         })
         .catch(error => {
           console.error('产品请求失败:', error);
         });
     }
   }
   

3. 额外处理：跨域问题
   如果你的Angular应用和WooCommerce站点不在同一域名下，需要在WooCommerce所在的WordPress站点配置CORS：

   • 可以安装WP CORS这类插件快速配置；
   • 或者在主题的functions.php中添加以下代码（生产环境建议把*换成你的Angular应用域名）：

     add_action('init', 'enable_woocommerce_cors');
     function enable_woocommerce_cors() {
       header("Access-Control-Allow-Origin: *");
       header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
       header("Access-Control-Allow-Headers: Content-Type, Authorization");
     }
     

为什么不推荐polyfill crypto？ #

虽然可以通过crypto-browserify这类库模拟Node的crypto模块，但这种方式容易出现版本兼容问题，后续维护成本高。官方的@woocommerce/woocommerce-rest-api已经做好了浏览器环境的适配，是更省心的选择。

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