HTTPS网站向HTTP VPS发起POST请求出现SSL协议错误的解决方案咨询

嗨，这个问题我碰到好多次了，其实根源是浏览器的混合内容安全策略在搞事情！

问题原因 #

当你的前端网站是HTTPS加密的，浏览器会严格禁止它向非HTTPS（也就是HTTP）的后端地址发起请求——这是浏览器为了防止安全风险的默认规则。你看到的net::ERR_SSL_PROTOCOL_ERROR并不是说你的VPS后端真的有SSL配置问题，而是浏览器直接拦截了这个跨协议的请求，根本没发出去。至于本地测试没问题，是因为localhost被浏览器认定为“安全上下文”，不会触发这个限制。

具体解决方案 #

这里给你几个可行的方案，按推荐程度排序：

1. 给VPS后端配置HTTPS（最推荐，生产环境必用）

这是最正规、最安全的做法，完全符合浏览器的安全要求。你可以用Let's Encrypt的免费SSL证书，配合你的Express服务来配置：

修改Express后端支持HTTPS：
先通过Certbot等工具生成SSL证书（私钥和证书文件），然后修改你的后端代码：

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

// 替换成你的证书文件实际路径
const sslOptions = {
  key: fs.readFileSync('/etc/letsencrypt/live/你的域名/privkey.pem'),
  cert: fs.readFileSync('/etc/letsencrypt/live/你的域名/fullchain.pem')
};

app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.post('/submit', (req, res) => {
  const { name, email } = req.body;
  console.log('Received data:', { name, email });
  // 一定要给前端返回响应，否则前端会判定请求失败
  res.status(200).json({ message: '数据接收成功' });
});

// 用https模块启动服务，替换原来的app.listen
https.createServer(sslOptions, app).listen(3000, () => {
  console.log(`HTTPS服务运行在端口3000`);
});

然后把前端的fetch地址改成https://你的VPS_IP:3000/submit，协议一致后就不会再报错了。

2. 用Nginx做反向代理（适合不想改后端代码的情况）

如果不想直接修改Express的代码，可以在VPS上部署Nginx，让Nginx来处理HTTPS请求，再把请求转发给本地的HTTP Express服务：

Nginx配置示例：

server {
  listen 443 ssl;
  # 可以填你的域名，或者直接用VPS的IP
  server_name your-vps-ip;

  # 证书文件路径，替换成你自己的
  ssl_certificate /etc/letsencrypt/live/你的域名/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/你的域名/privkey.pem;

  # 把/submit路径的请求转发给本地3000端口的Express服务
  location /submit {
    proxy_pass http://localhost:3000/submit;
    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;
  }
}

配置完成后，前端请求https://你的VPS_IP/submit即可，Nginx会自动转交给后端的HTTP服务，完美解决协议不一致的问题。

3. 临时放宽浏览器限制（仅用于本地测试，禁止上线）

如果你只是想临时测试，不想折腾证书，可以在Chrome里临时允许混合内容：

• 点击地址栏左边的锁图标 → 选择「网站设置」
• 找到「不安全内容」选项，改成「允许」
• 刷新页面后就能发起请求了

但注意：这个方法只能自己测试用，绝对不能要求普通访客这么做——不仅麻烦，还会带来安全风险。

补充小提醒 #

你的后端代码里，app.post('/submit')目前没有给前端返回任何响应，记得加上res.status(200).send(...)或者res.json(...)，不然前端会因为没有收到响应而触发catch里的错误哦！

备注：内容来源于stack exchange，提问作者warden