网站转HTTPS后出现net::ERR_SSL_PROTOCOL_ERROR及混合内容错误的解决

核心问题分析 #

你遇到的两个问题根源不同：

• 混合内容错误：页面加载了HTTP协议的资源（比如3000端口的API请求），但当前页面是HTTPS协议，浏览器会阻止这类不安全的请求。
• net::ERR_SSL_PROTOCOL_ERROR：3000端口的服务没有配置SSL证书，当你用HTTPS访问该端口时，服务无法返回合法的SSL响应，导致协议失败。

MongoDB不需要直接对外提供HTTPS服务，正确的做法是限制其仅本地访问，避免安全风险，后面会单独说明。

推荐方案：用Nginx做反向代理（最适合新手） #

通过Nginx统一处理HTTPS请求，将3000端口的后端API请求转发到本地HTTP服务，无需修改后端SSL配置，也能彻底解决混合内容问题。

步骤1：修改Nginx配置 #

打开你的域名Nginx配置文件（通常在/etc/nginx/sites-available/www.example.com），添加转发规则：

server {
    listen 443 ssl;
    server_name www.example.com;

    # 沿用你已配置的Let's Encrypt证书
    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;

    # 主站静态文件配置（保留你原有的配置）
    root /var/www/example.com;
    index index.html;

    # 转发3000端口的API请求（假设后端接口以/api开头，可根据实际调整）
    location /api/ {
        proxy_pass http://localhost:3000/;
        # 传递必要的请求头，让后端知道请求来自HTTPS
        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;
    }
}

步骤2：验证并重启Nginx #

• 测试配置合法性：sudo nginx -t
• 重启生效：sudo systemctl restart nginx

步骤3：调整前端API引用 #

把JS代码里的基础引用从https://www.example.com:3000改为https://www.example.com/api（去掉端口，用Nginx转发的路径），所有请求将通过Nginx的HTTPS通道转发到后端3000端口的HTTP服务，彻底解决混合内容和SSL错误。

备选方案：给3000端口的后端服务配置SSL #

如果你不想用反向代理，可以直接让后端服务（比如Node.js、Python Flask等）加载Let's Encrypt证书，监听HTTPS端口。以Node.js为例：

const https = require('https');
const fs = require('fs');
const express = require('express');
const app = express();

// 加载Let's Encrypt证书文件
const sslOptions = {
    key: fs.readFileSync('/etc/letsencrypt/live/www.example.com/privkey.pem'),
    cert: fs.readFileSync('/etc/letsencrypt/live/www.example.com/fullchain.pem')
};

// 后端路由示例
app.get('/data', (req, res) => {
    res.json({ status: 'ok' });
});

// 启动HTTPS服务监听3000端口
https.createServer(sslOptions, app).listen(3000, () => {
    console.log('HTTPS server running on port 3000');
});

注意事项：

• 确保后端进程有权限读取证书文件（可调整文件权限：sudo chmod 644 /etc/letsencrypt/live/www.example.com/*.pem）
• 开放VPS防火墙的3000端口：sudo ufw allow 3000/tcp

MongoDB安全配置（无需HTTPS） #

MongoDB不应该直接暴露给公网，正确的配置是限制其仅本地访问：

1. 打开MongoDB配置文件（通常在/etc/mongod.conf）
2. 找到net模块的bindIp，设置为127.0.0.1（仅允许本地连接）：

   net:
     port: 27017
     bindIp: 127.0.0.1
   

3. 重启MongoDB生效：sudo systemctl restart mongod

这样只有VPS上的后端服务能访问MongoDB，既安全又无需额外配置SSL。

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