From c8a314fb41521432756f47afabb0e2d0e8409196 Mon Sep 17 00:00:00 2001
From: Ahao <yaogunnvhai0408@gmail.com>
Date: Fri, 27 Jun 2025 13:29:38 +0800
Subject: [PATCH] add external `cors` control panel

---
 UPDATELOG.md                                  |   1 +
 .../setting/mods/external-controller-cors.tsx | 182 ++++++++++++++++++
 src/components/setting/setting-clash.tsx      |  18 ++
 src/locales/en.json                           |  10 +-
 src/locales/zh.json                           |  10 +-
 src/services/types.d.ts                       |   4 +
 6 files changed, 223 insertions(+), 2 deletions(-)
 create mode 100644 src/components/setting/mods/external-controller-cors.tsx

diff --git a/UPDATELOG.md b/UPDATELOG.md
index bb495b10..5b62f5e2 100644
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -14,6 +14,7 @@
 - `sidecar` 模式下清理多余的内核进程，防止运行出现异常
 - 新 macOS 下 TUN 和系统代理模式托盘图标（暂测）
 - 快捷键事件通过系统通知
+- 添加外部 `cors` 控制面板
 
 ### 🚀 优化改进
 
diff --git a/src/components/setting/mods/external-controller-cors.tsx b/src/components/setting/mods/external-controller-cors.tsx
new file mode 100644
index 00000000..8e48b09e
--- /dev/null
+++ b/src/components/setting/mods/external-controller-cors.tsx
@@ -0,0 +1,182 @@
+import { BaseDialog } from "@/components/base";
+import { useClash } from "@/hooks/use-clash";
+import { showNotice } from "@/services/noticeService";
+import {
+  Button,
+  Divider,
+  FormControlLabel,
+  List,
+  ListItem,
+  Switch,
+  TextField
+} from "@mui/material";
+import { Delete as DeleteIcon } from "@mui/icons-material";
+import { useLockFn, useRequest } from "ahooks";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ClashHeaderConfigingRef {
+  open: () => void;
+  close: () => void;
+}
+
+export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
+  (props, ref) => {
+    const { t } = useTranslation();
+    const { clash, mutateClash, patchClash } = useClash();
+    const [open, setOpen] = useState(false);
+
+    // CORS配置状态管理
+    const [corsConfig, setCorsConfig] = useState<{
+      allowPrivateNetwork: boolean;
+      allowOrigins: string[];
+    }>(() => {
+      const cors = clash?.["external-controller-cors"];
+      return {
+        allowPrivateNetwork: cors?.["allow-private-network"] ?? true,
+        allowOrigins: cors?.["allow-origins"] ?? ["*"]
+      };
+    });
+
+    // 处理CORS配置变更
+    const handleCorsConfigChange = (
+      key: "allowPrivateNetwork" | "allowOrigins",
+      value: boolean | string[]
+    ) => {
+      setCorsConfig(prev => ({
+        ...prev,
+        [key]: value
+      }));
+    };
+
+    // 添加新的允许来源
+    const handleAddOrigin = () => {
+      handleCorsConfigChange("allowOrigins", [...corsConfig.allowOrigins, ""]);
+    };
+
+    // 更新允许来源列表中的某一项
+    const handleUpdateOrigin = (index: number, value: string) => {
+      const newOrigins = [...corsConfig.allowOrigins];
+      newOrigins[index] = value;
+      handleCorsConfigChange("allowOrigins", newOrigins);
+    };
+
+    // 删除允许来源列表中的某一项
+    const handleDeleteOrigin = (index: number) => {
+      const newOrigins = [...corsConfig.allowOrigins];
+      newOrigins.splice(index, 1);
+      handleCorsConfigChange("allowOrigins", newOrigins);
+    };
+
+    // 保存配置请求
+    const { loading, run: saveConfig } = useRequest(
+      async () => {
+        await patchClash({
+          "external-controller-cors": {
+            "allow-private-network": corsConfig.allowPrivateNetwork,
+            "allow-origins": corsConfig.allowOrigins.filter(origin => origin.trim() !== "")
+          }
+        });
+        await mutateClash();
+      },
+      {
+        manual: true,
+        onSuccess: () => {
+          setOpen(false);
+          showNotice("success", t("Configuration saved successfully"));
+        },
+        onError: () => {
+          showNotice("error", t("Failed to save configuration"));
+        }
+      }
+    );
+
+    useImperativeHandle(ref, () => ({
+      open: () => {
+        const cors = clash?.["external-controller-cors"];
+        setCorsConfig({
+          allowPrivateNetwork: cors?.["allow-private-network"] ?? true,
+          allowOrigins: cors?.["allow-origins"] ?? ["*"]
+        });
+        setOpen(true);
+      },
+      close: () => setOpen(false),
+    }));
+
+    const handleSave = useLockFn(async () => {
+      await saveConfig();
+    });
+
+    return (
+      <BaseDialog
+        open={open}
+        title={t("External Cors Configuration")}
+        contentSx={{ width: 500 }}
+        okBtn={loading ? t("Saving...") : t("Save")}
+        cancelBtn={t("Cancel")}
+        onClose={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onOk={handleSave}
+      >
+        <List sx={{ width: "90%", padding: 2 }}>
+
+          <ListItem sx={{ padding: "8px 0", fontWeight: "bold" }}>
+            {t("External Controller CORS Settings")}
+          </ListItem>
+
+          <ListItem sx={{ padding: "8px 0" }}>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={corsConfig.allowPrivateNetwork}
+                  onChange={(e) => handleCorsConfigChange("allowPrivateNetwork", e.target.checked)}
+                />
+              }
+              label={t("Allow private network access")}
+            />
+          </ListItem>
+
+          <Divider sx={{ my: 2 }} />
+
+          <ListItem sx={{ padding: "8px 0" }}>
+            <div style={{ width: "100%" }}>
+              <div style={{ marginBottom: 8, fontWeight: "bold" }}>
+                {t("Allowed Origins")}
+              </div>
+              {corsConfig.allowOrigins.map((origin, index) => (
+                <div key={index} style={{ display: "flex", alignItems: "center", marginBottom: 8 }}>
+                  <TextField
+                    fullWidth
+                    size="small"
+                    sx={{ fontSize: 14, marginRight: 2 }}
+                    value={origin}
+                    onChange={(e) => handleUpdateOrigin(index, e.target.value)}
+                    placeholder={t("Please enter a valid url")}
+                    inputProps={{ style: { fontSize: 14 } }}
+                  />
+                  <Button
+                    variant="contained"
+                    color="error"
+                    size="small"
+                    onClick={() => handleDeleteOrigin(index)}
+                    disabled={corsConfig.allowOrigins.length <= 1}
+                  >
+                    <DeleteIcon fontSize="small" />
+                  </Button>
+                </div>
+              ))}
+              <Button
+                variant="contained"
+                size="small"
+                onClick={handleAddOrigin}
+                sx={{ mt: 2 }}
+              >
+                {t("Add")}
+              </Button>
+            </div>
+          </ListItem>
+        </List>
+      </BaseDialog>
+    );
+  }
+);
diff --git a/src/components/setting/setting-clash.tsx b/src/components/setting/setting-clash.tsx
index a56bf3ce..4639febc 100644
--- a/src/components/setting/setting-clash.tsx
+++ b/src/components/setting/setting-clash.tsx
@@ -21,6 +21,7 @@ import { GuardState } from "./mods/guard-state";
 import { NetworkInterfaceViewer } from "./mods/network-interface-viewer";
 import { SettingItem, SettingList } from "./mods/setting-comp";
 import { WebUIViewer } from "./mods/web-ui-viewer";
+import { HeaderConfiguration } from "./mods/external-controller-cors";
 
 const isWIN = getSystem() === "windows";
 
@@ -57,6 +58,7 @@ const SettingClash = ({ onError }: Props) => {
   const coreRef = useRef<DialogRef>(null);
   const networkRef = useRef<DialogRef>(null);
   const dnsRef = useRef<DialogRef>(null);
+  const corsRef = useRef<DialogRef>(null);
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<IConfigData>) => {
@@ -101,6 +103,7 @@ const SettingClash = ({ onError }: Props) => {
       <ClashCoreViewer ref={coreRef} />
       <NetworkInterfaceViewer ref={networkRef} />
       <DnsViewer ref={dnsRef} />
+      <HeaderConfiguration ref={corsRef} />
 
       <SettingItem
         label={t("Allow Lan")}
@@ -229,6 +232,21 @@ const SettingClash = ({ onError }: Props) => {
         }
       />
 
+      <SettingItem
+        onClick={() => corsRef.current?.open()}
+        label={
+          <>
+            {t("External Cors")}
+            <TooltipIcon
+              title={t(
+                "Enable one-click CORS for external API. Click to toggle CORS",
+              )}
+              sx={{ opacity: "0.7" }}
+            />
+          </>
+        }
+      />
+
       <SettingItem onClick={() => webRef.current?.open()} label={t("Web UI")} />
 
       <SettingItem
diff --git a/src/locales/en.json b/src/locales/en.json
index 43cd38c6..26a7d010 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -639,5 +639,13 @@
   "AppHiddenTitle": "APP Hidden",
   "AppHiddenBody": "APP window hidden by hotkey",
   "Invalid Profile URL": "Invalid profile URL. Please enter a URL starting with http:// or https://",
-  "Saved Successfully": "Saved successfully"
+  "Saved Successfully": "Saved successfully",
+  "External Cors": "External Cors",
+  "Enable one-click CORS for external API. Click to toggle CORS": "Enable one-click CORS for external API. Click to toggle CORS",
+  "External Cors Configuration": "External Cors Configuration",
+  "External Controller CORS Settings": "External Controller CORS Settings",
+  "Allow private network access": "Allow private network access",
+  "Allowed Origins": "Allowed Origins",
+  "Please enter a valid url": "Please enter a valid url",
+  "Add": "Add"
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index a64efe02..63653c8a 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -639,5 +639,13 @@
   "AppHiddenTitle": "应用隐藏",
   "AppHiddenBody": "已通过快捷键隐藏应用窗口",
   "Invalid Profile URL": "无效的订阅链接，请输入以 http:// 或 https:// 开头的地址",
-  "Saved Successfully": "保存成功"
+  "Saved Successfully": "保存成功",
+  "External Cors": "外部控制跨域",
+  "Enable one-click CORS for external API. Click to toggle CORS": "设置内核跨域访问，点击切换 CORS是否启用",
+  "External Cors Configuration": "外部控制跨域配置",
+  "External Controller CORS Settings": "外部控制跨域设置",
+  "Allow private network access": "允许专用网络访问",
+  "Allowed Origins": "允许的来源",
+  "Please enter a valid url": "请输入有效的网址",
+  "Add": "添加"
 }
diff --git a/src/services/types.d.ts b/src/services/types.d.ts
index 4bd03235..4ded6a0f 100644
--- a/src/services/types.d.ts
+++ b/src/services/types.d.ts
@@ -31,6 +31,10 @@ interface IConfigData {
   "socks-port": number;
   "tproxy-port": number;
   "external-controller": string;
+  "external-controller-cors": {
+    "allow-private-network": boolean;
+    "allow-origins": string[];
+  };
   secret: string;
   "unified-delay": boolean;
   tun: {