Vue+Node.js线上项目登录出现ERR_SSL_PROTOCOL_ERROR问题求助

错误原因 #

你的前端网站使用HTTPS协议（https://routehelper.com.br/），但前端代码中请求的后端接口是HTTP协议（http://89.116.225.159:5000/api/auth/login）。现代浏览器的混合内容安全策略会阻止HTTPS页面加载HTTP资源，甚至自动将HTTP请求强制转换为HTTPS请求。而你的后端服务在5000端口未配置SSL证书，无法处理HTTPS请求，因此出现ERR_SSL_PROTOCOL_ERROR和Failed to fetch错误。

本地环境和接口工具（Insomnia/Postman）能正常运行，是因为它们不受浏览器混合内容策略的限制。

解决方法 #

方法1：为后端配置SSL证书，改用HTTPS请求 #

• 在Hostinger VPS上为后端服务配置SSL证书（推荐使用免费的Let's Encrypt证书），让后端支持HTTPS协议。
• 修改前端请求地址为HTTPS：

  await fetch("https://89.116.225.159:5000/api/auth/login", {
      method: "POST",
      headers: {"Content-type": "application/json"},
      body: jsonDataObject
  })
  

• 注意：需确保后端服务正确配置SSL并监听HTTPS端口，或通过Nginx等反向代理工具处理SSL请求后转发到后端5000端口。

方法2：配置反向代理，统一域名（推荐生产环境使用） #

在Hostinger VPS上配置Nginx反向代理，将前端域名下的/api路径转发到后端服务，实现前后端同域名访问：

1. 配置Nginx示例：

   server {
       listen 443 ssl;
       server_name routehelper.com.br;
       # 替换为你的SSL证书文件路径
       ssl_certificate /etc/letsencrypt/live/routehelper.com.br/fullchain.pem;
       ssl_certificate_key /etc/letsencrypt/live/routehelper.com.br/privkey.pem;
   
       # 前端静态文件托管配置
       location / {
           root /var/www/routehelper-frontend/dist;
           try_files $uri $uri/ /index.html;
       }
   
       # 后端API代理配置
       location /api {
           proxy_pass http://localhost:5000/api;
           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. 修改前端请求为相对路径，无需指定IP和端口：

   await fetch("/api/auth/login", {
       method: "POST",
       headers: {"Content-type": "application/json"},
       body: jsonDataObject
   })
   

这种方式不仅解决了混合内容问题，还能避免跨域请求限制，是生产环境的最优方案。

方法3：临时绕过（仅用于个人测试，不推荐生产环境） #

若仅需临时测试，可在Chrome浏览器中修改设置：

1. 地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure
2. 启用该选项，并添加你的后端HTTP地址（http://89.116.225.159:5000）到列表中
3. 重启浏览器后测试

此方法仅适用于个人测试，普通用户访问网站时仍会遇到错误。

内容的提问来源于stack exchange，提问作者João Denari