React/Webpack中无法解析已安装的https模块问题求助

为实现禁用SSL证书验证的需求，我引入了Node.js的https模块，但编译时出现如下报错：

Module not found: Error: Can't resolve 'https' in '/home/etcetera ...'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
    - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "https": false }

我已安装https模块，最终需要运行的代码如下：

import https from 'https'
const agent = new https.Agent({
    rejectUnauthorized: false,
});


fetch(AN_API_URL, {
    method: "GET",
    headers: {
        Authorization : AN_API_KEY
    },
    agent: agent
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error.message))

1. 修复Webpack模块缺失问题 #

Webpack 5不再默认提供Node.js核心模块的polyfill，需手动配置兼容包：

• 安装浏览器兼容的https-browserify（你之前安装的https是Node.js核心模块，浏览器环境无法直接使用）：

  npm install https-browserify --save-dev
  

• 修改Webpack配置文件（通常为webpack.config.js），添加fallback配置：

  module.exports = {
    // 其他原有配置...
    resolve: {
      fallback: {
        "https": require.resolve("https-browserify")
      }
    }
  };
  

2. 修正代码兼容性问题 #

注意：浏览器环境的fetch API不支持agent参数（该参数为Node.js专属），需根据运行环境调整代码：

情况1：Node.js环境（含Electron主进程等） #

原代码可直接使用，但需将Webpack目标设为Node环境，无需polyfill：

module.exports = {
  target: 'node',
  // 其他原有配置...
  resolve: {
    fallback: {
      "https": false // Node环境自带https模块，无需兼容包
    }
  }
};

情况2：浏览器环境 #

浏览器出于安全限制，无法通过前端代码直接禁用SSL证书验证。若为开发环境，可通过浏览器启动参数绕过：

• Chrome：启动时添加--ignore-certificate-errors参数
• Firefox：在about:config中设置security.enterprise_roots.enabled为true，并添加证书例外

若需通过代码层面处理，可搭建Node.js代理服务器，在代理中禁用SSL验证，前端请求代理即可：
代理服务器示例：

// proxy.js
const https = require('https');
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
  target: AN_API_URL,
  changeOrigin: true,
  secure: false,
  agent: new https.Agent({ rejectUnauthorized: false })
}));

app.listen(3000, () => {
  console.log('代理服务器运行在http://localhost:3000');
});

前端代码修改为请求代理：

fetch('http://localhost:3000/api', {
    method: "GET",
    headers: {
        Authorization : AN_API_KEY
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error.message))

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