fix(cors): CORS 全 DB 化,install 模式完全跳过,WebUI 可配
完整方案: 与 auth_key 同思路,让 CORS 也走 DB,彻底干掉 ALLOWED_ORIGINS env。 设计: - install 模式: CORS 中间件直接 next(无 CORS 头也无 Vary),让装时永远能成功 (用户首次装不可能提前知道自己的访问域名) - normal 模式: 走 CORS 检查,但有 2 道防线: 1) 同源豁免 (isSameOrigin) — Origin 匹配 Host 直接放行 2) 跨域白名单 — 读 setting.CORS (DB > env) - DB 字段: - cors_allow_all (bool): 允许所有(*) - cors_origins (string): 换行分隔白名单,后端 trim+lower+去末尾 / - WebUI: /admin 设置 tab 加 CORS 段(allow_all checkbox + origins textarea + 保存) - 顶部 banner: cors_configured=false 时显示黄条提示,引导去设置 新增: - middleware/cors.go: 顶部 installer.GetMode() == ModeSetup 时直接 next - setting/config.go: SplitOriginsForCORS 导出 helper(供 controller 复用) - controller/settings.go: SettingsCORSRequest + SettingsCORSHandler - 校验每个 origin 必须 http:// 或 https:// 开头 - 写完立即刷新 setting.CORS.AllowAll + setting.CORS.Origins(下个跨域请求生效) - 拒绝空 body - router/router.go: 挂 /api/settings/cors (PUT, RequireAdmin) - router/admin.html: 设置 tab 加 CORS card + 顶部 banner (31.19KB, 略超 30KB 预算可接受) 改造: - setting/config.go LoadRuntimeConfig: 顺便读 cors_allow_all + cors_origins, DB > env 兜底 - controller/settings.go SettingsResponse: 加 cors_allow_all + cors_origins + cors_configured e2e 跑通(本机)10 场景: - install 任意 Origin → 200 (install mode 跳 CORS) - normal 同源 → 200 - normal 跨域无 allowlist → 403 - GET settings cors_configured=false - PUT /api/settings/cors → 200 - GET settings cors_configured=true - 跨域命中白名单 → 200 - 跨域未命中白名单 → 403 - allow_all=true → 任意跨域 200 - 重启后 CORS 仍从 DB 加载 未 push(等用户测试 install 是否顺利,以及 CORS banner 是否合适)
This commit is contained in:
@@ -294,6 +294,42 @@
|
||||
<button class="btn" @click="resetSettingsForm" style="margin-left: 8px;">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">跨域 CORS</div>
|
||||
<div class="card-desc" style="color: var(--text-dim); font-size: 12px; margin-bottom: 16px;">
|
||||
控制哪些前端域名能跨域调 <code>/v1/audio/speech</code>。同源始终放行。
|
||||
</div>
|
||||
<div class="field">
|
||||
<label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
|
||||
<input type="checkbox" v-model="corsForm.allow_all">
|
||||
<span>允许所有来源(<code>*</code>)</span>
|
||||
</label>
|
||||
<div class="hint">勾上后下面白名单失效。仅测试用</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>允许的来源 (一行一个,如 <code>https://app.example.com</code>)</label>
|
||||
<textarea v-model="corsForm.origins" rows="3" placeholder="https://app.example.com" style="width: 100%; font-family: monospace; font-size: 12px; padding: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px;"></textarea>
|
||||
<div class="hint">当前: <span style="color: var(--accent);">{{ corsCurrentLabel }}</span></div>
|
||||
</div>
|
||||
<div v-if="corsErr" class="err">{{ corsErr }}</div>
|
||||
<div v-if="corsOk" class="ok" style="color: var(--success); font-size: 12px; margin-top: 8px;">✓ 已保存,跨域请求从下个请求开始按新配置</div>
|
||||
<div style="margin-top: 16px;">
|
||||
<button class="btn btn-primary" @click="saveCors" :disabled="savingCors">{{ savingCors ? '保存中...' : '保存 CORS' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CORS 未配置 banner (登录后顶部,除非在 settings 页) -->
|
||||
<div v-if="settings && !settings.cors_configured && tab !== 'settings'" class="card" style="background: rgba(255, 193, 7, 0.08); border-color: #ffc107; margin-bottom: 16px;">
|
||||
<div style="display: flex; align-items: center; gap: 12px;">
|
||||
<span style="font-size: 18px;">⚠</span>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 600;">跨域 CORS 未配置</div>
|
||||
<div style="color: var(--text-dim); font-size: 12px; margin-top: 2px;">同源可用,跨域会 403。<code>设置 → 跨域 CORS</code> 配。</div>
|
||||
</div>
|
||||
<button class="btn" @click="tab='settings'">去设置</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="actionErr" class="err" style="margin-top: 16px;">⚠ {{ actionErr }}</div>
|
||||
@@ -345,6 +381,18 @@
|
||||
const settingsForm = ref({ default_resource_id: '', default_speaker: '', default_format: 'mp3', sample_rate: 24000, model: '' });
|
||||
const apiKeyInput = ref('');
|
||||
const authKeyInput = ref('');
|
||||
|
||||
// CORS 配置 (M3 follow-up)
|
||||
const corsForm = ref({ allow_all: false, origins: '' });
|
||||
const corsErr = ref('');
|
||||
const corsOk = ref(false);
|
||||
const savingCors = ref(false);
|
||||
const corsCurrentLabel = computed(() => {
|
||||
if (!settings.value) return '未配置';
|
||||
if (settings.value.cors_allow_all) return '允许所有来源(*)';
|
||||
if (settings.value.cors_origins) return settings.value.cors_origins;
|
||||
return '未配置(同源可用,跨域会被 403)';
|
||||
});
|
||||
const savingSettings = ref(false);
|
||||
const settingsErr = ref('');
|
||||
const settingsOk = ref(false);
|
||||
@@ -399,9 +447,28 @@
|
||||
sample_rate: r.data.sample_rate || 24000,
|
||||
model: r.data.model || '',
|
||||
};
|
||||
corsForm.value = {
|
||||
allow_all: !!r.data.cors_allow_all,
|
||||
origins: r.data.cors_origins || '',
|
||||
};
|
||||
settingsOk.value = false;
|
||||
} catch (e) { settingsErr.value = '加载设置失败: ' + (e.response?.data?.error?.message || e.message); }
|
||||
};
|
||||
const saveCors = async () => {
|
||||
corsErr.value = ''; corsOk.value = false;
|
||||
savingCors.value = true;
|
||||
try {
|
||||
await http.put('/settings/cors', {
|
||||
allow_all: corsForm.value.allow_all,
|
||||
origins: corsForm.value.origins,
|
||||
});
|
||||
await loadSettings();
|
||||
corsOk.value = true;
|
||||
setTimeout(() => corsOk.value = false, 3000);
|
||||
} catch (e) {
|
||||
corsErr.value = e.response?.data?.error?.message || e.message;
|
||||
} finally { savingCors.value = false; }
|
||||
};
|
||||
const reloadAll = () => { loadOverview(); loadVoices(); };
|
||||
|
||||
const saveSettings = async () => {
|
||||
@@ -498,6 +565,7 @@
|
||||
return { apiKey, keyInput, loginErr, login, logout, tab, overview, voices, actionErr,
|
||||
showAdd, form, addErr, adding, openAdd, submitAdd, toggle, remove,
|
||||
settings, settingsForm, apiKeyInput, authKeyInput, savingSettings, settingsErr, settingsOk,
|
||||
corsForm, corsErr, corsOk, savingCors, corsCurrentLabel, saveCors,
|
||||
loadSettings, saveSettings, saveApiKey, saveAuthKey, resetSettingsForm,
|
||||
formatUptime, shortPath, reloadAll };
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user