API在Postman可用但React调用报net::ERR_CERT_COMMON_NAME_INVALID错误

问题原因 #

Postman默认会放宽SSL证书的校验规则，但浏览器的验证逻辑很严格——要么是部署后的API证书上的**域名（CN/SAN）**和React请求的地址不匹配，要么是使用了自签名证书，浏览器不予信任。本地运行时无此问题，是因为本地一般用HTTP协议，或自签名证书未被浏览器严格拦截。

具体解决办法 #

1. 核对证书与请求域名 #

打开浏览器访问你的API域名，点击地址栏的锁图标，查看证书详情里的「主题」和「主题备用名称」，确认和React代码中请求的API地址完全一致，包括子域名（比如api.xxx.com不能写成xxx.com）。

2. 自签名证书的临时处理（仅开发环境使用） #

如果是测试环境使用自签名证书，可通过以下两种方式临时绕过校验：

• 启动React时关闭SSL校验
  修改package.json中的启动命令：

  "scripts": {
    "start": "NODE_TLS_REJECT_UNAUTHORIZED=0 react-scripts start"
  }
  

  或直接在终端执行启动命令：

  # Windows系统
  set NODE_TLS_REJECT_UNAUTHORIZED=0 && npm start
  
  # Mac/Linux系统
  NODE_TLS_REJECT_UNAUTHORIZED=0 npm start
  

• 将证书添加至浏览器信任列表
  把API的自签名证书导入浏览器信任区，以Chrome为例：设置→隐私和安全→安全→管理证书→导入证书并设为信任。

3. 生产环境解决方案 #

• 使用正规SSL证书（比如Let's Encrypt免费证书），确保证书覆盖你的API域名。
• 检查API服务器的证书配置，确保完整的证书链已配置，避免缺失中间证书。

4. 检查请求地址正确性 #

确认React代码中的API请求地址无误，不要在部署后仍使用本地地址（如localhost:3000）。

内容的提问来源于stack exchange，提问作者Mohd yusuf Irshad