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

文章目录

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

---

问题

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

解决方案

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

一、问题原因分析

1. 开发环境 vs 测试环境的协议差异：

   • 开发环境：http://192.168.90.91:33000 (HTTP协议)
   • 测试环境：https://192.168.90.60:33020 (HTTPS协议)

2. secure: false 的作用：

   • 当代理目标(target)使用 HTTPS 协议时，Vite 代理默认会验证 SSL 证书的有效性。
   • secure: false 禁用 SSL 证书验证，允许代理到使用自签名证书或无效证书的 HTTPS 服务。

3. 为什么开发环境不需要配置：

   • 开发环境使用 HTTP 协议，不涉及 SSL 证书验证，因此无需 secure: false。

4. 为什么测试环境需要配置：

   • 测试环境使用 HTTPS，但其证书可能是：
     • 自签名证书（非权威机构颁发）
     • 证书域名与 IP 地址不匹配（如用域名证书但通过 IP 访问）
     • 证书已过期
   • 浏览器和 Node.js 默认会拒绝此类证书，导致 500 错误。

---

二、解决方案详解

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

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

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

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

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

步骤：

1. 获取测试环境的证书：

   • 访问 https://192.168.90.60:33020 → 点击地址栏锁图标 → 导出证书（如 test-env.crt）

2. 在项目中配置证书：

   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. 环境区分配置（最佳实践）

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 不存在此问题。