【AI全栈+前端代理】前端代理配置中最常用的参数及说明

前端代理配置中最常用的参数及说明：

在前端开发中（如 Webpack-dev-server、Vite、Create React App 等），代理配置底层通常基于 http-proxy-middleware 。你提到的"是否支持 HTTPS 安全协议"的参数，正是 secure。

以下是前端代理配置中最常用的参数及说明：

参数 类型 默认值 说明

target string 必填 代理的目标服务器地址（如 http://localhost:3000 或

https://api.example.com） changeOrigin boolean false 是否将请求头中的

Origin 改为 target 的域。解决跨域核心参数 ，通常设为 true

secure boolean true 是否校验目标服务器的 SSL/TLS 证书 。设为 false 会跳过 HTTPS 证书验证（开发环境常用） pathRewrite object {} 路径重写规则，如 { '^/api': '' } 会把 /api/users 转发为 /users ws boolean false 是否代理 WebSocket

连接 headers object {} 附加自定义请求头，如 { 'X-Custom-Header': 'value' }

timeout number 未设置 请求超时时间（毫秒） auth string null 基础认证，格式

'username:password' onProxyReq / onProxyRes /

onError function 无 代理生命周期钩子，可用于修改请求、处理响应或捕获错误

🔑 重点说明：secure 参数

• 默认 true：严格校验目标 HTTPS 服务器的证书是否合法、未过期、由受信任 CA 签发。
• 设为 false：跳过证书校验 。适用于：
  • 本地开发使用自签名证书
  • 测试环境证书过期或未备案
  • 内网 HTTPS 服务
• ⚠️ 安全提醒 ：仅限开发/测试环境使用。生产环境务必保持 true，否则可能遭受中间人攻击。

📝 配置示例（Webpack / Vite 通用）

// vite.config.js 或 webpack.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://dev-api.example.com',
        changeOrigin: true,
        secure: false,          // 跳过 HTTPS 证书校验
        pathRewrite: { '^/api': '' },
        ws: true,
        timeout: 10000,
        onProxyReq: (proxyReq, req, res) => {
          // 可在转发前修改请求头或 body
          proxyReq.setHeader('X-Env', 'development');
        }
      }
    }
  }
}

💡 补充说明

• 如果你使用的是 Node.js 原生 http-proxy 或自定义 Agent，底层控制证书校验的参数是 rejectUnauthorized: false（属于 https.Agent 选项），但前端脚手架已将其封装为更易用的 secure。
• 不同工具（Vite / Webpack / CRA）的代理语法略有差异，但核心参数与行为完全一致，均基于 http-proxy-middleware。

如有具体框架或报错场景，可提供配置片段，我可帮你精准排查。