Express Generator 项目中 Axios 与 HTTP/HTTPS 请求的兼容性问题解析

问题背景

在 Express Generator 生成的项目中，开发者使用 Axios 发起 HTTP 请求时遇到了一个特殊问题：当通过 npm start 启动项目时，Axios 请求会失败并返回 "The plain HTTP request was sent to HTTPS port" 错误；而直接使用 node ./bin/www 命令启动时，同样的 Axios 请求却能正常工作。

技术分析

1. 问题本质

这个问题的核心在于 Node.js 环境中 HTTP 和 HTTPS 协议的混合使用。错误信息表明，客户端尝试通过 HTTP 协议向一个 HTTPS 端口发送请求，这显然违反了协议规范。

2. Express Generator 的特殊性

Express Generator 创建的项目结构中，./bin/www 文件是真正的应用入口点。这个文件会：

• 创建 HTTP 服务器
• 设置监听端口
• 处理环境变量
• 配置错误处理

当通过 npm start 运行时，NPM 会使用 package.json 中定义的启动脚本，这可能会引入额外的环境变量或配置，从而影响 Axios 的行为。

3. Axios 的默认行为

Axios 是一个基于 Promise 的 HTTP 客户端，它有以下特点：

• 默认会根据请求 URL 的协议自动选择 HTTP 或 HTTPS 模块
• 对于 HTTPS 请求，会自动处理 SSL/TLS 证书验证
• 提供请求和响应拦截能力

4. 问题根源

经过深入分析，问题的根本原因可能在于：

1. 环境变量差异：npm start 可能会设置某些环境变量，影响 Node.js 的 TLS/SSL 配置
2. 代理配置：某些 NPM 配置可能自动添加了代理设置，导致请求被重定向
3. 证书验证：不同的启动方式可能导致证书验证行为不同

解决方案

1. 显式指定协议

确保在 Axios 请求中明确使用 HTTPS 协议：

axios.get('https://jsonplaceholder.typicode.com/todos/1')

2. 检查环境变量

比较 npm start 和直接运行时的环境变量差异：

# 通过 npm start 运行时
npm start env

# 直接运行时
node ./bin/www env

3. 配置 Axios 实例

创建自定义 Axios 实例，明确配置 HTTPS 选项：

const axiosInstance = axios.create({
  httpsAgent: new https.Agent({  
    rejectUnauthorized: false // 仅用于开发环境
  })
});

4. 统一启动方式

建议项目团队统一使用 node ./bin/www 启动方式，或者在 package.json 中明确定义启动脚本：

{
  "scripts": {
    "start": "node ./bin/www"
  }
}

深入理解

1. Node.js 的 HTTP/HTTPS 模块

Node.js 的 http 和 https 模块是核心模块，分别处理不同协议的请求。当混合使用时，需要特别注意：

• http 模块默认使用 80 端口
• https 模块默认使用 443 端口
• 协议不匹配会导致连接错误

2. Express 的中间件机制

Express 框架的中间件机制不会直接影响底层协议选择，但可能通过以下方式间接影响：

• 请求重定向
• 代理设置
• 请求头修改

3. 开发与生产环境的差异

这个问题也提醒我们注意开发和生产环境的差异：

• 本地开发可能使用 HTTP
• 生产环境通常强制使用 HTTPS
• 环境变量可能改变应用行为

最佳实践建议

1. 协议一致性：确保前端和后端使用相同的协议（HTTP 或 HTTPS）
2. 环境隔离：明确区分开发、测试和生产环境配置
3. 请求监控：添加请求日志，帮助诊断类似问题
4. 错误处理：完善错误处理逻辑，提供有意义的错误信息
5. 文档记录：记录项目的特殊配置和启动要求

总结

Express Generator 项目中 Axios 请求的兼容性问题，揭示了 Node.js 应用中协议处理和环境配置的重要性。通过理解底层机制、统一配置和明确协议使用，可以有效避免这类问题。这也提醒开发者，即使是看似简单的 HTTP 请求，在不同的启动方式和环境下也可能表现出不同的行为，全面理解技术栈的各个层面对于解决问题至关重要。