React与Node.js通过Nginx连接时出现ERR_SSL_PROTOCOL_ERROR问题排查

核心错误点 #

1. 你的Node.js后端仅监听普通HTTP端口（8800），未配置SSL证书，因此前端用https://ip_address_server:8800访问时，浏览器会因无法完成SSL握手抛出ERR_SSL_PROTOCOL_ERROR。
2. 你已通过Nginx为子域名nodejs.Site_Name.com配置了SSL反向代理，但前端代码未使用该域名，反而直接访问IP的8800端口，绕开了Nginx的SSL处理层。

具体修复步骤 #

1. 修改前端API地址

将React代码中的baseUrl替换为已配置SSL的子域名地址，无需指定端口（Nginx默认监听HTTPS的443端口）：

baseQuery: fetchBaseQuery({
    baseUrl: "https://nodejs.Site_Name.com"
})

2. 调整Nginx反向代理配置

由于你的Node.js后端是HTTP服务，proxy_pass需使用http://而非https://，同时补充必要的代理头信息：

server {
    server_name nodejs.Site_Name.com;
    location / {
        proxy_pass http://localhost:8800;  # 改为http，匹配后端的HTTP服务
        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;
        # 补充头信息，帮助后端识别真实请求来源
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/nodejs.Site_Name.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/nodejs.Site_Name.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

3. 重启服务并验证

• 重启Nginx使配置生效：

  sudo systemctl restart nginx
  

• 重启Node.js后端服务，确保它正常监听8800端口（可通过以下命令检查）：

  netstat -tulpn | grep 8800
  

• 在浏览器直接访问https://nodejs.Site_Name.com/your-api-endpoint，确认API能正常返回数据且无SSL错误。

4. 处理跨域问题（若出现）

如果前端访问子域名时触发跨域错误，在Node.js后端通过cors包配置允许主域名请求：

const cors = require('cors');
app.use(cors({
    origin: 'https://Site_Name.com',
    credentials: true
}));

内容的提问来源于stack exchange，提问作者Peter Double U