服务器安装SSL证书后API POST请求出现net::ERR_SSL_PROTOCOL_ERROR问题

HTML #

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="farmapp.css"> 

</head>

<body onload="loadimg()">

    <div id="sitehead">
        
    <div class="leftsection" onclick="location.href = 'mainsite.html';">
            <div>
            <img class="left-sunriseIMG" src="thumbnails/sunrise.jpg">
            </div>
            <div>
            <h1 class="sitetitle">FARM</h1>
            </div>
        </div> 

        <div class="middlesection">
            <div>
        <!--
            <input class="search-box" type="text" placeholder="Search District">
            <label>Search using DISTRICT : </label>
        -->

        
            <button type="button" class="clearsearch" value="" onclick="location.href = 'mainsite.html';">x</button>
            </div>
            <div>
            <button type="submit" class="search-button" onclick="SearchWithDistrict()">Search</button>
            </div>
        </div>     
    </div>

    <div id="deals-box">
        <div class="about" onclick="location.href = 'About.html';">About</div>
        <div class="contact" onclick="location.href = 'contact.html';">contact</div>
        <div class="post" onclick="location.href = 'FishImageUpload.html';">Post-AD</div>
        <div class="edit" onclick="location.href = 'edit.html';">Edit-AD</div>
    </div>

    <div id="cimages"></div>

    <div id="FullImageView">
        <img id="FullImage" />
        <button id="CloseButton" onclick="CloseFullView()">Close</button>
    </div>

    <div id="FullDetailsView">
        <div id="ViewDetails"></div>
        <button id="DetailsCloseButton" onclick="CloseDetailsView()">Cancel</button> 
    </div>
    

<script src="main.js"></script>
</body>

</html>

前端JavaScript（main.js） #

function loadimg() {

    options = {
      method: 'POST',
    }
    
    fetch('https://apfarmsite.com:8000/FarmSite', options)
      .then(res => res.json())
      .then(cust_data => {  // Handle the response from the server
        console.log(cust_data);
      });
}

后端Node.js（app.js） #

app.post('/FarmSite', (req, res) => {
  console.log(req.body);
})

服务器安装SSL证书启用HTTPS后，发起POST请求出现net::ERR_SSL_PROTOCOL_ERROR错误，HTTP协议下请求正常。服务器用Nginx，EC2安全组已开放全量流量，是否需要调整SSL/TLS协议相关设置？

1. 修正Nginx反向代理配置 #

你的后端服务运行在8000端口，但SSL证书应该是配置在Nginx上的，而非Node服务本身。直接用HTTPS访问8000端口会因为后端未处理SSL握手导致协议错误，正确做法是让Nginx处理SSL请求后转发到后端：

server {
    listen 443 ssl;
    server_name apfarmsite.com;

    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/private.key;

    # 配置兼容现代浏览器的SSL/TLS规则
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    location /FarmSite {
        proxy_pass http://localhost:8000;
        proxy_set_header Host $host;
        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;
    }
}

# 重定向HTTP到HTTPS
server {
    listen 80;
    server_name apfarmsite.com;
    return 301 https://$host$request_uri;
}

2. 修改前端请求地址 #

去掉端口号，直接请求Nginx处理的HTTPS地址：

fetch('https://apfarmsite.com/FarmSite', options)

3. 验证SSL配置有效性 #

• 执行命令openssl s_client -connect apfarmsite.com:443，检查输出是否包含正常的证书信息、协议版本。
• 访问https://apfarmsite.com，确认浏览器地址栏显示安全锁，证书状态正常。

4. 限制后端服务监听范围 #

确保Node服务仅监听localhost:8000，不要直接暴露公网，所有外部请求通过Nginx代理。

5. 再次确认安全组 #

检查EC2安全组是否允许443端口的入站流量，避免配置遗漏。

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