React.js Web应用对接自签名HTTPS接口报错问题咨询

1 优先修复自签名证书问题（根因修复，适合长期使用） #

你遇到的NET::ERR_CERT_COMMON_NAME_INVALID报错90%以上是因为自签名证书不符合现代浏览器的安全要求：Chrome、Firefox等主流浏览器从2017年开始不再仅校验证书的Common Name字段，必须携带**Subject Alternative Name（SAN，主体备用名称）**扩展，且扩展中要包含你请求后端时使用的域名/IP。

• 验证方法：直接在浏览器地址栏输入任意后端HTTPS接口地址，点击地址栏左侧的不安全提示 → 查看证书，确认「扩展」字段下是否存在「主体备用名称」，且值包含你调用接口时使用的域名（如DNS:api.dev.com）或IP（如IP:192.168.1.10）
• 修复方法：重新生成自签名证书，生成时显式添加SAN字段配置即可。证书重新生成后再重新导入系统根证书和浏览器，重启浏览器生效。

2 开发环境临时快速解决方案 #

如果仅需要本地调试使用，可任选以下任意一种方案规避校验：

方案A：前端开发服务代理（最推荐，无浏览器兼容问题） #

利用React开发脚手架自带的代理能力，把接口请求转发到后端，避免跨域和证书校验问题：

• 如果使用Vite，在vite.config.js中添加如下配置：

export default defineConfig({
  server: {
    proxy: {
      '/api': { // 你的接口统一前缀
        target: 'https://你的后端接口地址',
        changeOrigin: true,
        secure: false, // 关闭代理时的SSL证书校验
      }
    }
  }
})

• 如果使用Create React App，在src/setupProxy.js（需额外安装http-proxy-middleware依赖）添加配置：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://你的后端接口地址',
      changeOrigin: true,
      secure: false,
    })
  );
};

配置后前端请求直接发送到当前开发服务的/api/xxx地址即可，由开发服务代理转发到后端，自动规避跨域和证书校验问题。

方案B：浏览器临时关闭证书校验 #

仅用于临时调试，不要用该配置访问公共网络：

• 关闭所有Chrome/Edge浏览器进程，右键浏览器快捷方式 → 属性，在「目标」栏末尾添加参数： --ignore-certificate-errors --allow-running-insecure-content（注意前面有空格），用该快捷方式启动浏览器后即可正常访问。
• Firefox可直接访问后端接口地址，点击「高级」→「接受风险并继续」，添加临时安全例外即可。

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