Vite项目localhost不安全致POST请求SSL错误，如何解决？

我正在开发一个基于React + Tailwind + Vite的个人项目，在注册组件中需要从客户端（localhost:5173）向服务端（localhost:5514）发送POST请求提交信息，但持续报错：

POST https://localhost:5514/api/auth/signup net::ERR_SSL_PROTOCOL_ERROR

我认为这和浏览器的“不安全”警告有关，但没找到解决办法。

我尝试添加了CORS配置，但没有任何变化，服务端代码如下：

import express from "express";
import cors from "cors";
import http from "http";
import dotenv from "dotenv";
import mongoose from "mongoose";
import authRoutes from "./src/routes/authRoutes.js";

dotenv.config();

const PORT = process.env.PORT || 5514;
const app = express();

app.use(express.json());


app.use(cors({
  origin: 'https://localhost:5173', 
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

app.get("/", (req, res) => {
    return res.send("Hello!");
});

app.options('*', cors());

app.use("/api/auth", authRoutes);

const server = http.createServer(app);

mongoose
    .connect(process.env.MONGO_URL!)
    .then(() => {
        server.listen(PORT, () => {
            console.log(`server is listening on ${PORT}`);
        });
    })
    .catch((err) => {
        console.log("database connection failed. server didn't start.");
        console.log(err);
    });

1. 修复HTTP/HTTPS协议不匹配问题 #

你的服务端用http.createServer启动的是纯HTTP服务，但客户端请求用的是https://localhost:5514，浏览器会尝试建立SSL加密连接，而服务端不支持SSL协议，直接导致ERR_SSL_PROTOCOL_ERROR。

两种解决方式二选一：

• 修改客户端请求地址：把请求URL改成http://localhost:5514/api/auth/signup，和服务端协议保持一致
• 服务端启用HTTPS：如果必须用HTTPS，需要先生成本地SSL证书（可使用mkcert工具），然后改用https.createServer启动服务，示例代码：

  import https from "https";
  import fs from "fs";
  
  // 读取本地生成的SSL证书文件
  const sslOptions = {
    key: fs.readFileSync('./localhost-key.pem'),
    cert: fs.readFileSync('./localhost.pem')
  };
  
  // 替换原有的http.createServer
  const server = https.createServer(sslOptions, app);
  

2. 修正CORS配置 #

当前CORS配置的origin设置为https://localhost:5173，如果你的Vite开发环境默认用HTTP（http://localhost:5173），这个配置会导致CORS校验失败。需要根据客户端实际协议修改：

app.use(cors({
  origin: 'http://localhost:5173', 
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

3. 消除浏览器“不安全”警告 #

如果客户端用HTTP访问时浏览器提示“不安全”，可在Vite开发环境启用HTTPS：

• 安装插件：npm install @vitejs/plugin-basic-ssl -D
• 在vite.config.js中配置：

  import basicSsl from '@vitejs/plugin-basic-ssl'
  
  export default {
    plugins: [basicSsl()]
  }
  

  启动后客户端地址会变为https://localhost:5173，此时要确保服务端也启用HTTPS，且CORS的origin对应https://localhost:5173。

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