create-react-app React应用代理请求遇DEPTH_ZERO_SELF_SIGNED_CERT错误求助

Hey，这个问题我太熟了！你碰到的DEPTH_ZERO_SELF_SIGNED_CERT错误，核心原因是Create React App背后用的http-proxy-middleware代理模块，默认会严格验证目标HTTPS服务器的SSL证书有效性。而你的后端用的是自签名证书，这种证书不在系统信任列表里，所以代理直接给你报错了。

下面给你几个实用的解决方案，按推荐优先级排序：

方法1：自定义代理配置（最推荐，适合长期开发） #

package.json里的proxy字段只能处理简单场景，要跳过SSL验证得用自定义代理配置：

• 在你的React项目src文件夹下新建setupProxy.js（这个文件名是固定的，Create React App会自动加载它，不用手动引入）
• 先装一下依赖（如果还没装的话）：

npm install --save-dev http-proxy-middleware

• 把下面的代码放进setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    ['/auth/google', '/api/*'],
    createProxyMiddleware({
      target: 'https://localhost:8008',
      changeOrigin: true,
      // 关键配置：告诉代理不要验证SSL证书
      secure: false,
    })
  );
};

• 重启你的React开发服务器，再试代理请求，应该就没问题了。

方法2：临时用环境变量跳过验证（快速测试用） #

如果你只是想快速跑起来测试，不想改代码，可以在启动React的时候加个环境变量，让Node.js暂时跳过所有SSL证书验证：

NODE_TLS_REJECT_UNAUTHORIZED=0 npm start

⚠️ 划重点：这个方法是全局禁用证书验证，只适合开发环境临时用，生产环境绝对不能这么搞，会有严重安全风险。

方法3：把自签名证书加入系统信任列表（最安全的开发方案） #

要是你不想禁用验证，也可以把你生成的localhost.cert加到系统的信任根证书里，这样系统就会认可这个自签名证书了：

• Windows：双击localhost.cert，点「安装证书」，选「本地计算机」，然后把证书放到「受信任的根证书颁发机构」存储区。
• macOS：双击localhost.cert打开钥匙串，找到这个证书后右键选「显示简介」，在「信任」选项里把「使用此证书时」改成「始终信任」。
• Linux：比如Ubuntu，把证书复制到/usr/local/share/ca-certificates/，然后运行sudo update-ca-certificates。

添加完证书后重启React服务器，代理就会自动信任这个证书，不用额外配置了。

额外说明 #

你后端设置的rejectUnauthorized: false是让后端接受客户端的自签名证书，但现在是React的代理服务器（localhost:3000）去请求后端（localhost:8008），所以得在代理端也就是React这边配置信任证书或者跳过验证，这才是解决问题的核心哦。

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