mihomo + metacubexd + docker compose + nginx 反代教程

[xfl12345]

先吐槽一番信息的闭塞与混乱。
一开始找 clash内核 的代替品，找到 "clash meta"/"singbox" 这两个内核。
clash meta 不知道为什么改名成了 mihomo （避嫌？），我很长一段时间不知道它们竟然是同一个东西！
（就像 USB 3.0 一改 3.1 再改 3.2 造成信息极度混乱的感觉……）
然后找容器化部署方案。mihomo 没有把 docker 部署方案写到 readme 里，网上也找不到教程。
却十分万幸地在这个仓库找到了镜像tag以及 docker compose 的写法。

碎碎念 废话结束，开始正篇！

[xfl12345]

• docker-compose.yml

# version: '3'
services:
  clash: # Clash 内核
    container_name: clash-meta
    image: metacubex/mihomo:v1.18.4  # 最新版用 metacubex/mihomo:Alpha
    restart: always
    pid: host
    ipc: host
    network_mode: host
    cap_add:
      - ALL
    security_opt:
      - apparmor=unconfined
    volumes:
      - ~/clash_meta/clash:/root/.config/mihomo
      - /dev/net/tun:/dev/net/tun
      # 共享host的时间环境
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro

  metacubexd: # Clash WebUI
    container_name: metacubexd
    image: ghcr.io/metacubex/metacubexd
    restart: always
    network_mode: bridge
    ports:
      - '127.0.0.1:28002:80'
    volumes:
      - ~/clash_meta/caddy:/config/caddy
      # 共享host的时间环境
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro

[xfl12345]

启动命令：docker-compose up -d
停机并删除命令：docker-compose down
docker 其它用法，请自行查阅官方文档。

[xfl12345]

• ~/clash_meta/clash/config.yaml

mixed-port: 7890
allow-lan: true
external-controller: 127.0.0.1:28001
secret: 8a09518e-5d92-4a7e-b811-9dfd3b611842

mode: rule
proxies:
  - name: "本地xray"
    type: socks5
    server: 127.0.0.1
    port: 1080
    udp: true
  # - name: "本地singbox"
  #   type: socks5
  #   server: 127.0.0.1
  #   port: 8848
  #   udp: true

proxy-groups:
  - name: "我的跳板"
    type: select
    proxies:
      - "本地xray"
      # - "本地singbox"
  - name: "第三方跳板1"
    type: select
    use:
     - "第三方订阅（名字要和 proxy-providers 里的一样）"
  - name: "第三方跳板2"
    type: url-test # 根据 HTTP 测速延迟自动选择
    use:
     - "第三方订阅2"

# URL 延迟检测 通用配置
my-url-test: &my-url-test
  # 延迟检测 URL
  health-check:
    enable: true
    url: https://cp.cloudflare.com
    # 节点连通性检测时间，单位为秒
    interval: 300
    # 节点超时延迟，单位为毫秒
    timeout: 1000
    # 节点自动切换差值，单位为毫秒
    tolerance: 100

proxy-providers:
  "第三方订阅（名字要和 proxy-providers 里的一样）":
    type: http
    url: "https://你的第三方订阅URL，一般情况长这样，但不一定是这个样子/subscribe?token=2426efe5aaaaa492aaa458aaa4afa83d"
    path: /root/.config/mihomo/di3fang.yaml
    # 自动更新订阅时间，单位为秒
    interval: 3600 # 一小时
    # URL 延迟检测逻辑
    <<: *my-url-test
  "第三方订阅2":
    type: http
    url: "https://你的第三方订阅URL，一般情况长这样，但不一定是这个样子/subscribe?token=2426efe5acbda492aaa458aaa4afa83d"
    path: /root/.config/mihomo/di3fang22222222222222222222222222222.yaml
    # 自动更新订阅时间，单位为秒
    interval: 3600 # 一小时
    # URL 延迟检测逻辑
    <<: *my-url-test

dns:
  enable: true
  ipv6: true
  nameserver:
    - https://[2606:4700:4700::1111]/dns-query
    - 223.5.5.5
  fake-ip-filter:
    - +.stun.*.*
    - +.stun.*.*.*
    - +.stun.*.*.*.*
    - +.stun.*.*.*.*.*
    - "*.n.n.srv.nintendo.net"
    - +.stun.playstation.net
    - xbox.*.*.microsoft.com
    - "*.*.xboxlive.com"
    - "*.msftncsi.com"
    - "*.msftconnecttest.com"
    - WORKGROUP

rules:
  #- PROCESS-PATH,/usr/bin/xray,DIRECT
  - PROCESS-NAME,ddns-go,DIRECT
  - PROCESS-NAME,xray,DIRECT
  - PROCESS-NAME,qbittorrent-nox,DIRECT
  - MATCH,我的跳板

tun:
  enable: false
  stack: system
  auto-route: true
  auto-detect-interface: true

更多配置细节，请查阅官方文档
clash原版docs
mihomo docs

教程作者我是参考自这个大佬的 配置 才弄懂的
配置文件只是个举例，除了 external-controller: 127.0.0.1:28001 变了就要相应地修改后文中的 NGINX 反代配置文件，其余地方都能改！

[xfl12345]

nginx 反代

• /etc/nginx/conf.d/ddns.conf

# clash meta WEBUI metacubexd
server {
    listen 0.0.0.0:2082;
    listen [::]:2082;
    client_max_body_size 32m;

    location /assets/ {
        access_log /opt/wwwlogs/clash_webui_access.log main;
        error_log /opt/wwwlogs/clash_webui_error.log;
        include snippets/my_default_http1p1_proxy_setting.conf;
        proxy_pass http://127.0.0.1:28002;
    }

    location ~* ^/.*\.(js|css|htm|html|bmp|png|jpg|jpeg|svg|ico|webmanifest)$ {
        access_log /opt/wwwlogs/clash_webui_access.log main;
        error_log /opt/wwwlogs/clash_webui_error.log;
        include snippets/my_default_http1p1_proxy_setting.conf;
        proxy_pass http://127.0.0.1:28002;
    }

    location / { # clash meta API
        if ($request_uri = "/") {
            return 301 ./index.html;
        }

        access_log /opt/wwwlogs/clash_api_access.log main;
        error_log /opt/wwwlogs/clash_api_error.log;
        include snippets/my_default_http1p1_proxy_setting.conf;
        proxy_pass http://127.0.0.1:28001;
    }
}

• /etc/nginx/snippets/my_default_http1p1_proxy_setting.conf

include snippets/my_proxy_headers.conf;
proxy_http_version 1.1;
proxy_read_timeout 360s;

• /etc/nginx/snippets/my_proxy_headers.conf

set $diy_connection_upgrade "upgrade";
if ( $http_upgrade = '' ) {
    # set $diy_connection_upgrade "keep-alive";
    # set $diy_connection_upgrade "close";
    set $diy_connection_upgrade $connection;
}
proxy_set_header Connection $diy_connection_upgrade;
proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Host $proxy_host;
proxy_set_header Host $http_host;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
# proxy_set_header X-Forwarded-Port $remote_port;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Nginx-Proxy true;

[Vanhelsin21]

nginx 反代

• /etc/nginx/conf.d/ddns.conf

# clash meta WEBUI metacubexd
server {
    listen 0.0.0.0:2082;
    listen [::]:2082;
    client_max_body_size 32m;

    location /assets/ {
        access_log /opt/wwwlogs/clash_webui_access.log main;
        error_log /opt/wwwlogs/clash_webui_error.log;
        include snippets/my_default_http1p1_proxy_setting.conf;
        proxy_pass http://127.0.0.1:28002/assets/;
    }

    location ~* ^/.*\.(js|css|htm|html|bmp|png|jpg|jpeg|svg|ico|webmanifest)$ {
        access_log /opt/wwwlogs/clash_webui_access.log main;
        error_log /opt/wwwlogs/clash_webui_error.log;
        include snippets/my_default_http1p1_proxy_setting.conf;
        proxy_pass http://127.0.0.1:28002;
    }

    location / { # clash meta API
        if ($request_uri = "/") {
            return 301 ./index.html;
        }

        access_log /opt/wwwlogs/clash_api_access.log main;
        error_log /opt/wwwlogs/clash_api_error.log;
        include snippets/my_default_http1p1_proxy_setting.conf;
        proxy_pass http://127.0.0.1:28001;
    }
}

• /etc/nginx/snippets/my_default_http1p1_proxy_setting.conf

include snippets/my_proxy_headers.conf;
proxy_http_version 1.1;
proxy_read_timeout 360s;

• /etc/nginx/snippets/my_proxy_headers.conf

set $diy_connection_upgrade "upgrade";
if ( $http_upgrade = '' ) {
    # set $diy_connection_upgrade "keep-alive";
    # set $diy_connection_upgrade "close";
    set $diy_connection_upgrade $connection;
}
proxy_set_header Connection $diy_connection_upgrade;
proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Host $proxy_host;
proxy_set_header Host $http_host;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
# proxy_set_header X-Forwarded-Port $remote_port;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Nginx-Proxy true;

反代这部分不太懂，求教，nginx已经安装了，相关文件也创建了，是还需要配置一个动态域名吗？菜鸟一只，没弄过反代

[xfl12345]

假设DDNS域名是 example.com
那么访问的时候，后地址是 http://example.com:2082
密钥就是写在 ~/clash_meta/clash/config.yaml 里的 secret 字段。（本教程的话就是8a09518e-5d92-4a7e-b811-9dfd3b611842）

这个密钥记得自己改！！！用 UUID 生成器随便生成一个！！！
这个密钥记得自己改！！！用 UUID 生成器随便生成一个！！！
这个密钥记得自己改！！！用 UUID 生成器随便生成一个！！！

为安全考虑，建议给 Nginx 装上 SSL证书。

Enjoy yourself! :)

[iseesaw]

您好！请问 mihomo + metacubexd docker 部署之后，如何使用呢？我在文件服务器上部署了 docker，希望在局域网服务器上通过下面命令使用

export https_proxy=http://IP:7890 http_proxy=http://IP:7890 all_proxy=socks5://IP:7890

请问这个要怎么实现呢？

[xfl12345]

mihomo 容器已经是 network_mode: host 了，已经是在宿主机网络堆栈监听 7890 端口了。
可以通过执行 netstat -nltup | grep 7890 来检查

[chrisdong]

我在compose需要代理的某个容器下方，加上了

• http_proxy=http://自己的ip:7890
• https_proxy=http://自己的ip:7890

[xfl12345]

这样写不太好，写死了。 鉴于教程提供的 network_mode 是 host

需要代理的 docker 容器 compose 配置文件直接添加如下代码

services:
  some_service_name:
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      - http_proxy=http://host.docker.internal:7890
      - https_proxy=http://host.docker.internal:7890
      - all_proxy=socks5://host.docker.internal:7890

这种方式，貌似在linux下面不行，在docker desktop下面才可以

可以的。你的docker引擎什么版本？我的是26.1.4 而且是 cli 不是 desktop

[fighter2011]

这样写不太好，写死了。 鉴于教程提供的 network_mode 是 host
需要代理的 docker 容器 compose 配置文件直接添加如下代码

services:
  some_service_name:
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      - http_proxy=http://host.docker.internal:7890
      - https_proxy=http://host.docker.internal:7890
      - all_proxy=socks5://host.docker.internal:7890

这种方式，貌似在linux下面不行，在docker desktop下面才可以

可以的。你的docker引擎什么版本？我的是26.1.4 而且是 cli 不是 desktop

版本是26.1.2，在另外一个容器里面Ping host.docker.internal只得到一条记录，然后超时，有点奇怪

[xfl12345]

这样写不太好，写死了。 鉴于教程提供的 network_mode 是 host
需要代理的 docker 容器 compose 配置文件直接添加如下代码

services:
  some_service_name:
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      - http_proxy=http://host.docker.internal:7890
      - https_proxy=http://host.docker.internal:7890
      - all_proxy=socks5://host.docker.internal:7890

这种方式，貌似在linux下面不行，在docker desktop下面才可以

可以的。你的docker引擎什么版本？我的是26.1.4 而且是 cli 不是 desktop

版本是26.1.2，在另外一个容器里面Ping host.docker.internal只得到一条记录，然后超时，有点奇怪

ping 都不行啦……
那就看看是不是 docker 引擎自己的配置文件哪里有问题

• /etc/docker/daemon.json

{
    "ipv6": true,
    "experimental": true,
    "fixed-cidr-v6": "fd00:0:0:ffff::/90",
    "ip6tables": true,
    "features": {
        "buildkit": true
    },
    "bip": "172.17.0.1/16"
}

还有是不是主机禁 PING

你可以试试 busybox 镜像里 wget

[xfl12345]

这样写不太好，写死了。 鉴于教程提供的 network_mode 是 host
需要代理的 docker 容器 compose 配置文件直接添加如下代码

services:
  some_service_name:
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      - http_proxy=http://host.docker.internal:7890
      - https_proxy=http://host.docker.internal:7890
      - all_proxy=socks5://host.docker.internal:7890

这种方式，貌似在linux下面不行，在docker desktop下面才可以

可以的。你的docker引擎什么版本？我的是26.1.4 而且是 cli 不是 desktop

版本是26.1.2，在另外一个容器里面Ping host.docker.internal只得到一条记录，然后超时，有点奇怪

写了一个 curl 测试

# version: "3"

# official repo URL=https://github.com/curl/curl-container
services:
  curl_test:
    container_name: curl-test
    image: ghcr.io/curl/curl-container/curl:master
    pull_policy: always
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      - http_proxy=http://host.docker.internal:7890
      - https_proxy=http://host.docker.internal:7890
      - all_proxy=socks5://host.docker.internal:7890
    command: "curl --head https://www.google.com/"
    volumes:
      # 共享host的时间环境
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    network_mode: bridge
    restart: "no"

docker compose up 测试，测试完了 docker compose down 避免浪费空间
如果在GFW部署区测试日志出现

curl-test  | HTTP/1.1 200 Connection established
curl-test  | 
curl-test  | HTTP/2 200

那就是成功走代理了

[fighter2011]

可以了，vps自己的防火墙把docker也给拦截了，放开了docker0网段就可以了

[foxdodo]

补充一下，用这个老哥的config.yaml配置文件 https://gist.github.com/liuran001/5ca84f7def53c70b554d3f765ff86a33
改下以下内容就可以用了

# metacubexd连接的端口和secret
external-controller: 0.0.0.0:28001
secret: 799c8b45-78e9-4bf8-86af-366c4b20970f
# 订阅地址
  订阅一:
    <<: *p
    path: ./proxy_provider/订阅一.yaml
    url: "你的订阅地址"

[ibarnard]

老哥，能否给出完整的 yaml 文件，我直接抄作业，因为我试过失败了。

[1525745393]

填写订阅地址一直打不开

[fbigun]

mark

[new1943]

我都启动完了，但一直认证失败是咋回事？

[new1943]

改了n次，就是打开metacubexd页面后，去认证mihomo的服务9090那个，提示401

[xfl12345]

改了n次，就是打开metacubexd页面后，去认证mihomo的服务9090那个，提示401

密码不对。确定填的是 clash 配置文件里的那个 secret 吗？

[michaelauto]

UI和内核怎么不整合在一起

[star8618]

按照你们的配置，我只能打开国内网站，国外网站一个打不开！知道什么情况不？

[uduoy]

其实用docker部署ShellCrash就行了，ShellCrash貌似可以用mihomo内核，多内核可选

[xfl12345]

失踪人口诈尸复活来更新了。关于第三方订阅的写法已 更新

一开始没有写订阅的写法是因为教程作者我主要利用 clash 的 TUN 能力，流量跑本地的 xray 的 socks5 然后再翻到我自建的小鸡。
自己本就是小鸡场主，没有用 clash 的捉襟见肘的支持特性，所以就没写 clash 的订阅配置。

召唤
@1525745393 @star8618 @ibarnard

[wintsa123]

问一下，我现在是nas上部署，我希望的是meta内核部署再bridge网桥，然后nas上的其他docker服务通过端口再走局域网代理。但是我给meta加了bridge，现在的情况是前端页面metacubexd 也打不开。。。

[xfl12345]

Docker Compose 怎么写的？

[xfl12345]

如果你把 meta 给 bridge 了，你得确保浏览器打开 metacubexd 时，填入的 URL 能访问到 meta 的 API 端口

文件 ~/clash_meta/clash/config.yaml 里要改一下，对外暴露。

external-controller: 0.0.0.0:28001

然后 docker-compose.yml 也要对外映射端口

services:
  clash:
    # bala bala
    ports:
      - "127.0.0.1:28001:28001"

如果不使用 NGINX 反代，可以映射成 0.0.0.0:28001:28001

[wintsa123]

docker 我是这样写的

version: '3'

services:
  metacubexd:
    container_name: metacubexd
    image: docker.1panel.top/metacubex/mihomo
    restart: always
    ports:
      - '3300:80'
    volumes:
      - /volume1/docker/meta/meta:/config/caddy
      # 共享host的时间环境
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro
    networks:
      - vpn_bridge

  meta:
    container_name: meta
    image: docker.io/metacubex/mihomo:Alpha
    restart: always
    cap_add:
      - NET_ADMIN
    devices:
      - /dev/net/tun:/dev/net/tun
    networks:
      - vpn_bridge
    volumes:
      - /volume1/docker/meta/config:/root/.config/mihomo
      - /etc/timezone:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro

networks:
  vpn_bridge:
    driver: bridge

因为是bridge部署，所以也不知道要不要映射tun,然后config我是用电脑端的clash里面的config复制了一份过去。
我不理解的是 metacubexd 为什么打不开，按道理来说metacubexd 只是一个前端，而且我也不知道怎么设置metacubexd 应该访问meta内核的地址。
所以也不知道meta的config有没有做对，meta内核容器我以及开放了和config.yaml相同的端口

[xfl12345]

你的 meta 没有映射端口出来。
你得确保浏览器打开 metacubexd 时，填入的 URL 能在浏览器侧访问到 meta 的 API 端口。
也就是说，你自己也要确保浏览器能直接访问填入的 URL ，而且不能发生 CORS 跨域问题。
还有，不要一个人占多层楼。同一个问题在同一楼回复即可。善用 edit 功能，不要反复删帖再发。

关于 CORS 的定义 浏览器的同源策略

[wintsa123]

你的 meta 没有映射端口出来。 你得确保浏览器打开 metacubexd 时，填入的 URL 能在浏览器侧访问到 meta 的 API 端口。 也就是说，你自己也要确保浏览器能直接访问填入的 URL ，而且不能发生 CORS 跨域问题。 还有，不要一个人占多层楼。同一个问题在同一楼回复即可。善用 edit 功能，不要反复删帖再发。

关于 CORS 的定义 浏览器的同源策略

我大概懂你意思，就是meta映射端口，然后metacubexd 跨域访问这个端口。但是问题是metacubexd 我部署了也打不开。。。。

[xfl12345]

你的 meta 没有映射端口出来。 你得确保浏览器打开 metacubexd 时，填入的 URL 能在浏览器侧访问到 meta 的 API 端口。 也就是说，你自己也要确保浏览器能直接访问填入的 URL ，而且不能发生 CORS 跨域问题。 还有，不要一个人占多层楼。同一个问题在同一楼回复即可。善用 edit 功能，不要反复删帖再发。
关于 CORS 的定义 浏览器的同源策略

我大概懂你意思，就是meta映射端口，然后metacubexd 跨域访问这个端口。但是问题是metacubexd 我部署了也打不开。。。。

docker镜像换成官方的，先别用第三方镜像试试

[wintsa123]

我尝试访问3300这个metacubexd 的80端口，但是也打不开前端。日记也没提示错误。。。

[xfl12345]

@wintsa123
MetaCubexd 雷锋群 已创建！主要由社区提供公益服务！
https://t.me/metacubexd_public_benefit

[SyberRabbit]

请问，配置nginx用来做啥，反代mihomo的http代理端口吗？
我是想nginx反代mihomo的http端口，套一个证书，最后用frp内网穿透出去。

效果就是：
出门在外，不用开范强软件，tg也能正常收消息，浏览器也能随时访问谷歌，
若不小心把范强软件卸载了，也可以临时范强

[xfl12345]

端口号	用途
28001	小蓝猫 WebAPI（既是代理软件本体，又是网页服务器，负责动态内容）
28002	小蓝猫网页客户端APP服务器（负责静态内容）

这里的“动静分离”即Web软件常见架构——前后端分离
总结：目前提供的 NGINX 配置不是你认为的“HTTP代理”跳板

Q: 教程提供的 NGINX 配置到底是为了什么？
A: 为了解决 WebAPP 常见的 CORS 跨域问题，为了提供参考，证明可以搭配食用。

[Uphill7154]

我使用了 nginx-proxy-manager 配合 楼主的 github 的教程 和 AI 的辅助，成功搞定了 https域名反代 和 添加后端的问题。

让 AI 写了个 文档。其中比较重要的是 同源 跨域 这两个安全概念。在 文档中的 涉及知识点详解 (通俗解读版) 有解释

Case Study: Clash WebUI 反向代理配置排错之旅

1. 案例背景、问题与最终解决方案

1.1 背景

用户希望通过一个安全的 HTTPS 域名 (https://clashui.example.com) 来访问他的 Clash WebUI。他的部署环境如下：

• Clash 内核: clash-meta 容器，API 端口为 9091。
• Clash WebUI: metacubexd 容器，服务端口为 8091。
• 反向代理: 使用 Nginx Proxy Manager (NPM) 进行代理。

目标是将 UI 和内核的 API 通过同一个域名访问，以获得最佳的兼容性和安全性。

1.2 问题描述 (The "Failed to fetch" Saga)

最初，用户尝试通过域名访问 UI，但在 UI 页面中设置后端的 IP 地址 (http://192.168.x.x:9091) 时，连接总是失败，浏览器开发者工具显示 Failed to fetch 或 Mixed Content 错误。

在排错过程中，我们经历了几个阶段：

1. 初步尝试：尝试使用 /api 子路径来代理内核 API，但未成功。
2. 关键诊断：通过 curl 命令确认了内核 API 是可访问的，但需要认证 (401 Unauthorized)。通过浏览器开发者工具，最终定位到核心问题是混合内容 (Mixed Content)。
3. 定位根源：用户在 https 的 UI 页面中，直接请求了 http 的 IP 地址，这被浏览器安全策略所禁止。

1.3 最终解决方案

我们采纳了社区验证过的分离代理方案，其核心思想是：让浏览器始终与同一个安全源 (https://clashui.example.com) 通信，由 Nginx 在后端智能地将请求分发给不同的容器。

• Nginx 配置:
  • 创建多个 location 块。
  • 将对静态文件（如 .js, .css, .html）的请求转发给 UI 容器 (metacubexd)。
  • 将所有其他请求（API 调用和 WebSocket）转发给内核容器 (clash-meta)。
  • 在转发给内核时，必须附上 Authorization 请求头。
• UI 配置:
  • 在 metacubexd 的后端设置中，填写的地址是域名本身 (https://clashui.example.com)，而不是后端的 IP 地址。

这个方案完美地解决了浏览器的安全限制，实现了最终的成功连接。

---

2. 涉及知识点详解 (通俗解读版)

2.1 为什么不能在 HTTPS 页面直接请求 HTTP 的 IP 地址？

这个问题的核心是两个浏览器安全策略：混合内容 (Mixed Content) 和 同源策略 (Same-Origin Policy)。

混合内容 (Mixed Content)

• 场景: 您通过 https://clashui.example.com 访问 UI，这是一个加密的安全环境，就像一栋安保严密的大楼。
• 问题: 当您在 UI 里填入后端的 IP 地址 http://192.168.x.x:9091 时，您是在要求浏览器从这栋安全大楼里，去访问一个街对面、没上锁的普通房子 (http://...)。
• 浏览器的反应: 浏览器作为您的“安全卫士”，会立刻阻止这个行为，并报错“Mixed Content”。这是为了防止在安全的会话中混入不加密的内容，从而导致信息被窃听或篡改。
• 一句话总结: HTTPS 页面里，不能直接请求 HTTP 资源。

同源策略 (Same-Origin Policy) 与跨域 (Cross-Origin)

• 什么是“源” (Origin)?
  一个“源”由 协议 (https)、域名 (clashui.example.com)、端口 (443) 三部分组成。只要有一个不同，就是不同的“源”。

• 什么是“同源策略”?
  这是浏览器的核心安全规定：一个源的网页脚本，没有资格去读取另一个源的服务器返回的数据。 这就像银行的规定，只有 bank.com 网站的脚本才能读取 bank.com 服务器返回的您的账户余额。

• 在我们的案例中:

  • UI 页面的源是: https://clashui.example.com:443
  • API 内核的源是: http://192.168.x.x:9091
  • 这两个源的协议、域名、端口完全不同，因此从 UI 页面请求 API 内核，就构成了跨域请求，会被同源策略阻止。

2.2 为什么可以跨域加载图片和脚本？

这是一个很棒的观察点，也是理解同源策略的关键。同源策略主要限制的是“读取”操作，而不是“嵌入”操作。

• API 请求 (读取操作):

  • 目的: 脚本的目的是为了读取并解析返回的数据（比如 JSON）。
  • 风险: 极高。如果任何网站都能随意读取银行 API 的数据，后果不堪设想。
  • 策略: 必须严格限制，除非目标服务器通过 CORS (跨域资源共享) 明确授权。

• 加载图片/CSS/JS (嵌入操作):

  • 目的: 浏览器只是获取资源并将其显示或执行。
  • 风险: 很低。页面脚本无法直接读取图片的像素数据或 JS 文件的源代码（对于从不同源加载的脚本）。这就像在您的幻灯片里贴了一张别人的公开照片，您无法分析照片的化学成分。
  • 策略: 浏览器对 <img>, <link>, <script> 等标签的跨域加载予以豁免。

2.3 Nginx 反向代理如何解决这一切？

我们的 Nginx 配置就像一个值得信赖的“门卫”，它站在 https://clashui.example.com 这个安全大楼的门口。它通过分离代理 (Splitting Proxy) 的高级技巧，完美地解决了问题。

• 对浏览器隐藏复杂性: 您的浏览器只和这个“门卫”打交道，所有请求（无论是页面、API还是WebSocket）都发往同一个、安全的源 https://clashui.example.com。因此，混合内容和跨域问题从根本上被避免了。

• 在后端智能分发: “门卫” (Nginx) 收到请求后，会根据我们设定的规则（location 块），智能地判断这个请求应该去哪里。

  • 是 .js 文件？好的，我去 UI 容器 (:8091) 那里取。
  • 是 API 请求？好的，我去内核容器 (:9091) 那里取，并且记得带上认证信息 (Authorization 头)。

通过这种方式，Nginx 完美地充当了中间人，既满足了浏览器的安全要求，又实现了后端服务的灵活部署。

---

3. 手把手操作教程 (脱敏版)

3.1 Clash config.yaml 关键配置

确保你的 Clash 配置文件中，external-controller 监听在 0.0.0.0 或你的局域网 IP，并设置一个安全的 secret。

# ... 其他配置 ...

# 允许局域网访问
allow-lan: true

# API 和 Web UI 的外部控制器
# 监听在所有网络接口的 9091 端口
external-controller: 0.0.0.0:9091

# 设置一个复杂的密码
secret: 'YOUR_VERY_SECRET_PASSWORD'

# ... 其他配置 ...

3.2 docker-compose.yml 关键配置

在这个配置中，最关键的是 metacubexd 的环境变量 CLASH_API_BASE_URL。

services:
  # Clash 内核容器
  meta:
    container_name: clash-meta
    image: docker.io/metacubex/mihomo:latest
    restart: always
    # 使用 host 网络模式，方便直接访问端口
    network_mode: host
    cap_add:
      - ALL
    volumes:
      # 将你的配置文件目录挂载进去
      - ./clash-config:/root/.config/mihomo/
      - /dev/net/tun:/dev/net/tun

  # Clash WebUI 容器
  metacubexd:
    container_name: metacubexd
    image: ghcr.io/metacubex/metacubexd:latest
    restart: always
    ports:
      # 将容器的 80 端口映射到主机的 8091 端口
      - '8091:80'
    environment:
      # 关键：告诉 UI，后端的 API 地址就是我们的域名本身
      - CLASH_API_BASE_URL=https://clashui.example.com/
      # 这里的密码需要和 config.yaml 中的 secret 一致
      - CLASH_SECRET=YOUR_VERY_SECRET_PASSWORD

3.3 Nginx Proxy Manager (NPM) 配置

在 NPM 中添加一个新的代理主机，然后在“高级 (Advanced)”选项卡中，粘贴以下自定义 Nginx 配置。

# --- 核心代理逻辑 ---
# 本配置采用“分离代理”模式，它根据请求URL的特征，
# 智能地将请求路由到UI容器(metacubexd)或内核容器(clash-meta)。

# 规则1: 代理UI的核心静态资源 /assets/
location /assets/ {
    # 将请求转发给 metacubexd UI 容器 (运行在 8091 端口)
    proxy_pass http://YOUR_SERVER_IP:8091;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

# 规则2: 代理其他所有UI静态文件
location ~* \.(js|css|htm|html|bmp|png|jpg|jpeg|svg|ico|webmanifest)$ {
    # 同样将请求转发给 metacubexd UI 容器
    proxy_pass http://YOUR_SERVER_IP:8091;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

# 规则3: 默认代理 API 和 WebSocket 到内核
location / {
    # 访问根路径时，重定向到 index.html 以加载 UI
    if ($request_uri = "/") {
        return 301 /index.html;
    }

    # 将请求转发给 clash-meta 内核容器 (运行在 9091 端口)
    proxy_pass http://YOUR_SERVER_IP:9091;
    
    # 关键：转发认证头，解决 401 Unauthorized 问题
    proxy_set_header Authorization $http_authorization;

    # 关键：启用 WebSocket 支持
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    
    # 其他标准代理头
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_http_version 1.1;
    proxy_redirect off;
}

将 YOUR_SERVER_IP 替换为您运行 Docker 容器的主机的局域网 IP 地址。

完成以上配置后，请按顺序重启服务：

1. 重启 Docker 容器 (如果修改了 docker-compose.yml):

   # 在 docker-compose.yml 文件所在目录运行
   docker-compose down && docker-compose up -d

2. 重载 Nginx 配置:

   docker exec -it npm nginx -s reload

最后，清理浏览器缓存并访问 https://clashui.example.com，即可完美访问您的 Clash WebUI。

[zhuziyi1989]

在私人局域网里，没必要搞这么复杂，使用 http 协议访问即可

[xfl12345]

在私人局域网里，没必要搞这么复杂，使用 http 协议访问即可

确实。但因为本教程引入了 DDNS 域名食用姿势，所以会推荐使用 HTTP + TLS 。
基础 HTTP 反代主要解决一个跨域问题， AI 总结文起到一定的科普作用