开发环境中ReactJS调用Spring Boot HTTPS接口遇INVALID_COMMON_NAME错误求助

问题根源 #

浏览器和Postman能正常访问，但React应用不行，核心原因是React开发环境的请求库（fetch/axios）和浏览器的证书信任逻辑不一样——你手动在浏览器里信任了自签名证书，但React依赖的Node.js runtime默认不认可未被系统根证书库收录的证书，哪怕浏览器已经信任。

分步解决 #

1. 确认证书的SAN配置完全覆盖访问场景 #

别只盯着CN字段，SAN（Subject Alternative Name）才是当前浏览器和HTTP客户端校验的核心。确保你的证书SAN里包含：

• 后端的私有IPv4地址（比如192.168.1.100）
• React开发时用的localhost（如果React跑在本地）
• 服务器的主机名（如果有用到）

用openssl生成证书的示例命令：

openssl req -x509 -newkey rsa:4096 -keyout server.key -out server.crt -days 365 -nodes \
-subj "/CN=192.168.1.100" \
-addext "subjectAltName=IP:192.168.1.100,DNS:localhost,DNS:my-chat-server"

2. 让React开发环境信任自签名证书 #

两种方式选一种：

方式一：临时跳过证书校验（仅开发环境）

在React项目的package.json里修改start脚本，添加环境变量关闭Node的证书校验：

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

方式二：将证书导入系统根证书库（更安全）

• Linux/macOS：

sudo cp server.crt /usr/local/share/ca-certificates/chat-server.crt
sudo update-ca-certificates

• Windows（管理员权限运行）：

certutil -addstore -f "ROOT" server.crt

3. 核对请求URL与证书的匹配性 #

确保React代码里的请求地址和证书里的CN/SAN完全一致——比如你证书里填的是192.168.1.100，就别用localhost或者其他IP去请求后端。

4. WSS（WebSocket）的配套处理 #

如果WebSocket也连不上，除了上述步骤，还要检查Spring Boot的SSL配置：
在application.properties里配置证书信息：

server.ssl.key-store-type=PKCS12
server.ssl.key-store=classpath:keystore.p12
server.ssl.key-store-password=your-password
server.ssl.key-alias=chat-server

React里的WebSocket连接地址要改成wss://192.168.1.100:443/ws，如果用了方式一的环境变量，WebSocket客户端会自动跳过证书校验。

5. 清除浏览器缓存 #

浏览器可能缓存了旧的证书或安全策略，按Ctrl+Shift+R强制刷新，或者直接清除浏览器的SSL缓存后再测试。

生产环境提示 #

开发用自签名证书凑活就行，但生产环境必须用正规CA签发的证书（比如Let's Encrypt免费证书），彻底避免信任问题。

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