http与https协议区别；vue3本地连接https地址接口报500

文章目录

问题
解决方案
- 一、问题原因分析
- 二、解决方案详解
- - - [1. 保持当前配置（推荐临时方案）](#1. 保持当前配置（推荐临时方案）)
    - [2. 更安全的方案（推荐）](#2. 更安全的方案（推荐）)
    - [3. 环境区分配置（最佳实践）](#3. 环境区分配置（最佳实践）)
- 三、为什么开发环境不用配置？

问题

问题：本地开发时候，连接开发环境http的地址接口访问正常；但是本地连接测试环境地址https接口访问500

解决方案

https时候，需要配置secure: false 禁用 SSL 证书验证

一、问题原因分析

开发环境 vs 测试环境的协议差异：
- 开发环境：http://192.168.90.91:33000 (HTTP协议)
- 测试环境：https://192.168.90.60:33020 (HTTPS协议)
secure: false 的作用：
- 当代理目标(target)使用 HTTPS 协议时，Vite 代理默认会验证 SSL 证书的有效性。
- secure: false 禁用 SSL 证书验证，允许代理到使用自签名证书或无效证书的 HTTPS 服务。
为什么开发环境不需要配置：
- 开发环境使用 HTTP 协议，不涉及 SSL 证书验证，因此无需 secure: false。
为什么测试环境需要配置：
- 测试环境使用 HTTPS，但其证书可能是：
  - 自签名证书（非权威机构颁发）
  - 证书域名与 IP 地址不匹配（如用域名证书但通过 IP 访问）
  - 证书已过期
- 浏览器和 Node.js 默认会拒绝此类证书，导致 500 错误。

二、解决方案详解

1. 保持当前配置（推荐临时方案）

在代理配置中显式设置 secure: false：

javascript 复制代码

proxy: {
  "/inms-application": {
    target: loadEnv(mode, "./env/").VITE_APP_SERVEICE,
    changeOrigin: true,
    secure: false, // 禁用证书验证
    // ...其他配置
  }
}

优点：快速解决问题
缺点：存在中间人攻击风险（仅限开发环境可接受）

2. 更安全的方案（推荐）

步骤：

获取测试环境的证书：
- 访问 https://192.168.90.60:33020 → 点击地址栏锁图标 → 导出证书（如 test-env.crt）

在项目中配置证书：

javascript 复制代码

import fs from 'fs';

server: {
  proxy: {
    "/inms-application": {
      target: loadEnv(mode, "./env/").VITE_APP_SERVEICE,
      changeOrigin: true,
      secure: true, // 保持验证
      ca: fs.readFileSync('path/to/test-env.crt'), // 添加自签名证书
    }
  }
}

优点：保持安全性
缺点：需额外证书文件

3. 环境区分配置（最佳实践）

javascript 复制代码

const isTestEnv = loadEnv(mode, "./env/").VITE_APP_SERVEICE.includes('https');

server: {
  proxy: {
    "/inms-application": {
      target: loadEnv(mode, "./env/").VITE_APP_SERVEICE,
      changeOrigin: true,
      secure: !isTestEnv, // 仅在测试环境禁用验证
    }
  }
}

三、为什么开发环境不用配置？

HTTP 协议无需证书：开发环境使用 HTTP，代理时不会触发 SSL 验证流程。
测试环境触发验证：HTTPS 协议要求证书合法性检查，而测试环境的证书不符合 Node.js 的默认信任规则。

💡 根本原因：测试环境的 HTTPS 证书未通过 Node.js 的严格验证（自签名/IP不匹配/过期等），而开发环境的 HTTP 不存在此问题。