使用Vite重构React项目时端口80访问异常问题求助

云原生阿岚

2026-7-23

原因分析与解决方案

问题原因

HTTPS协议的默认端口是443，HTTP协议默认端口是80。你当前配置Vite在HTTPS模式下监听80端口，当直接访问https://exampleSite.com时，浏览器会自动尝试连接443端口，但你的Vite服务并未在该端口运行，因此无法建立连接；而显式指定:80时，浏览器才会正确访问到Vite服务所在的80端口。

解决方案

有两种可行方案解决这个问题：

方案1：改用HTTPS默认端口443

将Vite服务的监听端口改为HTTPS默认的443端口，这样浏览器访问https://exampleSite.com时会自动匹配该端口，无需手动指定。

修改Vite配置文件：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
  plugins: [react(), mkcert()],
  server: {
    https: true,
    host: 'exampleSite.com',
    port: 443,
    strictPort: true
  }
});

注意事项：

443是系统保留端口，Linux/macOS环境下需要使用sudo命令启动Vite（如sudo npm run dev），Windows环境下需要以管理员身份打开终端运行启动命令。
mkcert插件会自动生成本地可信SSL证书，确保浏览器不会出现安全警告。

方案2：保持80端口，配置反向代理转发

如果无法使用443端口（比如没有管理员权限），可以通过反向代理工具（如Nginx）将443端口的请求转发到Vite的80端口服务。

以Nginx为例，添加以下配置：

server {
    listen 443 ssl;
    server_name exampleSite.com;

    # 配置mkcert生成的SSL证书路径
    ssl_certificate /your/cert/path/exampleSite.com.pem;
    ssl_certificate_key /your/key/path/exampleSite.com-key.pem;

    location / {
        proxy_pass https://localhost:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

配置完成后重启Nginx，访问https://exampleSite.com时，请求会被转发到运行在80端口的Vite服务。