React集成Authorize.net Node.js SDK构建时出现http模块未找到错误

成因 #

1. Webpack 5移除了默认的Node.js核心模块polyfill：Webpack 4及更早版本会自动为http、https这类Node.js核心模块提供浏览器兼容的polyfill，Webpack 5取消了这一默认行为，需要手动配置。
2. 依赖库依赖Node环境API：你引入的Authorize.net Node.js SDK依赖winston日志库，该库调用了Node.js的http模块，而前端浏览器环境不存在这个模块，导致构建失败。
3. 架构逻辑不合理：Authorize.net Node SDK是为服务端设计的，直接在前端React项目中引入不仅会引发环境兼容问题，还存在泄露API密钥的安全风险。

解决方法 #

方法一：临时修复构建错误（不推荐长期使用） #

如果仅需临时通过构建，可按照Webpack提示配置polyfill：

• 安装所需的polyfill包：

  npm install stream-http https-browserify url util --save-dev
  

• 修改项目的Webpack配置文件（Hyva React Checkout项目通常在reactapp目录下的webpack.config.js，或通过craco等工具配置），添加resolve.fallback配置：

  module.exports = {
    // 其他现有配置
    resolve: {
      fallback: {
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "url": require.resolve("url/"),
        "util": require.resolve("util/")
      }
    }
  };
  

• 若不需要polyfill，也可以直接禁用该模块的解析（但可能导致SDK运行时出错）：

  resolve: {
    fallback: {
      "http": false,
      "https": false
    }
  }
  

方法二：架构调整（推荐，从根源解决问题） #

Authorize.net Node SDK必须运行在服务端，正确的做法是：

• 在后端（如Magento自定义模块的控制器）编写支付处理接口，在服务端调用Authorize.net SDK完成扣款逻辑，避免前端暴露敏感密钥。
• 前端React项目仅负责收集用户支付信息（建议使用Authorize.net的Accept.js等前端token化方案，避免处理明文卡号），然后通过API请求调用后端的支付接口。
• 移除前端项目中对Authorize.net Node SDK的依赖，仅保留前端请求逻辑。

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