React调用HTTPS配置的SpringBoot后端出现net::ERR_CERT_AUTHORITY_INVALID错误

核心问题根源 #

1. 证书信任问题：你的SpringBoot使用的大概率是自签名SSL证书，浏览器会严格验证证书颁发机构的合法性，而Postman默认关闭了证书验证，所以Postman能正常请求但前端报错。
2. 证书域名不匹配：React直接请求EC2的公网IP（18.205.106.161），但你的证书绑定的是域名ezgate.ai，IP与证书域名不匹配，触发浏览器的证书验证错误。
3. 未通过Nginx统一代理API请求：当前Nginx仅代理了前端的80端口请求，前端直接跨域访问后端的8443端口，同时叠加证书问题导致报错。

具体解决步骤 #

1. 给Nginx配置HTTPS并统一代理前后端请求 #

使用受信任的CA证书（比如Let's Encrypt免费证书）配置Nginx的HTTPS，同时把前端页面和后端API请求都通过Nginx代理，避免跨域和证书问题。修改后的Nginx配置如下：

server {
    listen 80;
    server_name ezgate.ai;
    # 将所有HTTP请求重定向到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name ezgate.ai;

    # 替换为你的Let's Encrypt证书路径（根据实际部署路径调整）
    ssl_certificate /etc/letsencrypt/live/ezgate.ai/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/ezgate.ai/privkey.pem;

    # 代理前端页面请求到React的3000端口
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # 代理后端API请求到SpringBoot服务（这里假设后端接口前缀为/api，可根据实际调整）
    location /api {
        proxy_pass https://127.0.0.1:8443;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        # 若暂时无法替换自签证书，可临时开启Nginx跳过证书验证（生产环境不推荐）
        # proxy_ssl_verify off;
    }
}

2. 修改React的Axios配置，使用域名路径而非IP #

让Axios请求同一个域名下的API路径，避免跨域和证书域名不匹配问题：

import axios from "axios";

// 直接使用相对路径，或明确写域名https://ezgate.ai/api
export const BASE_URL = "/api";

export const myAxios = axios.create({
  baseURL: BASE_URL,
});

3. 替换为受信任的SSL证书（关键） #

放弃自签证书，使用主流浏览器信任的CA颁发的证书：

• 推荐使用Let's Encrypt免费证书，可以通过certbot工具自动申请和续期，部署到EC2的Nginx上。
• 确保证书的**主题备用名称（SAN）**包含你的域名ezgate.ai，避免域名不匹配问题。

4. 可选优化：调整SpringBoot配置 #

如果Nginx已经处理了HTTPS，SpringBoot可以改为监听HTTP端口，减少SSL层的重复处理，修改application.yml：

server:
  port: 8080
  # 注释掉原有的SSL配置
  # ssl:
  #   key-store: classpath:file.p12
  #   key-store-password: problem
  #   ...

同时把Nginx的location /api中的proxy_pass改为http://127.0.0.1:8080即可。

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