Caddy 2配置WSS反向代理至WS解决WebSocket混合内容报错

这个问题由两部分配置错误共同导致：

• 浏览器默认安全策略会拦截HTTPS页面发起的明文ws://请求（也就是报错里的Mixed Content混合内容拦截），你当前Vue开发服务的热更新（HMR）客户端错误使用了内网IP192.168.1.1:8000作为WebSocket连接地址，直接发起明文ws请求，既绕过了Caddy的HTTPS入口，也违反了浏览器安全规则。
• 现有Caddy反代配置没有显式透传WebSocket升级所需的请求头，即使前端请求走对了地址，也可能出现WebSocket连接失败的问题。
  你之前其他WebSocket服务遇到同类问题，本质也是这两个原因。

1. 修改Vue开发服务配置 #

首先让前端的WebSocket请求走公网域名的加密wss协议，不要硬编码内网地址。
如果是Vite创建的Vue3项目（3.2版本默认用Vite），修改项目根目录的vite.config.js：

import { defineConfig } from '@vitejs/plugin-vue'

export default defineConfig({
  server: {
    host: '0.0.0.0', // 监听所有网卡地址，允许本地反代访问
    port: 8000,
    hmr: {
      protocol: 'wss',
      clientPort: 443 // 走Caddy的HTTPS端口
    }
  }
})

如果是Vue CLI（webpack）创建的项目，修改根目录的vue.config.js：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8000,
    client: {
      webSocketURL: 'wss://vue.domain.com/ws'
    }
  }
}

修改完成后重启Vue开发服务。

2. 调整Caddy反代配置 #

在reverse_proxy段添加头透传规则，确保WebSocket升级请求能正确转发到内网服务，修改后的配置如下：

apps:
  http:
    http_port: 8080
    https_port: 443
    servers:
      myserver:
        listen:
        - ":443"
        routes:
        - match:
          - host:
            - vue.domain.com
          handle:
          - handler: subroute
            routes:
            - handle:
              - handler: reverse_proxy
                upstreams:
                - dial: 127.0.0.1:8000
                headers:
                  request:
                    set:
                      X-Forwarded-Proto: https
                      X-Real-IP: {http.request.remote.host}
                    Upgrade: {http.request.header.Upgrade}
                    Connection: {http.request.header.Connection}
          terminal: true

执行命令重载Caddy配置生效：
caddy reload --config 你的配置文件路径

清空浏览器缓存后重新访问https://vue.domain.com，控制台不会再出现混合内容报错，页面访问、热更新功能都能正常使用。
后续其他带WebSocket的服务走Caddy反代时，只要保证前端不硬编码内网明文ws地址、反代规则透传Upgrade头，就不会再出现同类问题，完全适配你“公网HTTPS、内网明文”的部署逻辑。

内容的提问来源于stack exchange，提问作者Lenich