修复前端远程访问 API 失败

- 前端默认使用同源 /api 请求，由 Next.js 代理到后端
- 支持通过 NEXT_SERVER_API_BASE_URL 配置后端代理地址
- 避免浏览器直连后端端口导致 Failed to fetch
- 背景：GitHub issue #65 反馈粘贴视频链接后创建任务无反应
- 影响：提升局域网、远程主机和 Tailscale 访问 WebUI 时的可用性

Author: benzfy

README.en.md

@@ -224,6 +224,12 @@ Frontend:
 npm --prefix apps/web run dev -- --hostname 0.0.0.0 --port 3000
 ```
 
+By default, the frontend calls same-origin `/api/...` URLs and Next.js proxies them to `http://127.0.0.1:8000`. If the backend is not on local port `8000`, set `NEXT_SERVER_API_BASE_URL` when starting the frontend, for example:
+
+```bash
+NEXT_SERVER_API_BASE_URL=http://192.168.1.10:8000 npm --prefix apps/web run dev -- --hostname 0.0.0.0 --port 3000
+```
+
 Open:
 
 ```text

README.md

@@ -224,6 +224,12 @@ npm --prefix apps/web run dev -- --hostname 0.0.0.0 --port 3000
 npm --prefix apps/web run dev -- --hostname 0.0.0.0 --port 3000
 ```
 
+前端默认通过同源 `/api/...` 请求访问后端，并由 Next.js 代理到 `http://127.0.0.1:8000`。如果后端不在本机 `8000` 端口，启动前端时设置 `NEXT_SERVER_API_BASE_URL`，例如：
+
+```bash
+NEXT_SERVER_API_BASE_URL=http://192.168.1.10:8000 npm --prefix apps/web run dev -- --hostname 0.0.0.0 --port 3000
+```
+
 打开：
 
 ```text

apps/web/next.config.ts

@@ -1,7 +1,23 @@
 import type { NextConfig } from "next";
 
+function apiProxyTarget() {
+  const configured =
+    process.env.NEXT_SERVER_API_BASE_URL ||
+    process.env.NEXT_PUBLIC_API_BASE_URL ||
+    "http://127.0.0.1:8000";
+  return configured.replace(/\/$/, "");
+}
+
 const nextConfig: NextConfig = {
   allowedDevOrigins: ["172.27.2.90", "100.94.222.54"],
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${apiProxyTarget()}/api/:path*`,
+      },
+    ];
+  },
 };
 
 export default nextConfig;

apps/web/src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { FormEvent, useCallback, useEffect, useState } from "react"
+import { FormEvent, useEffect, useState } from "react"
 import { ChevronRight, Play } from "lucide-react"
 
 import {
@@ -53,24 +53,25 @@ export default function Home() {
   const [error, setError] = useState("")
   const [submitting, setSubmitting] = useState(false)
 
-  const refreshTasks = useCallback(async () => {
+  async function refreshTasks() {
     const { tasks: list } = await listTasks()
     setTasks(list)
-  }, [])
+  }
 
   useEffect(() => {
     let cancelled = false
-    const load = async () => {
+
+    const loadTasks = async () => {
       try {
         const { tasks: list } = await listTasks()
-        if (cancelled) return
-        setTasks(list)
+        if (!cancelled) setTasks(list)
       } catch (err) {
         if (!cancelled) setError(err instanceof Error ? err.message : t.home.loadError)
       }
     }
-    load()
-    const interval = window.setInterval(load, 2000)
+
+    loadTasks()
+    const interval = window.setInterval(loadTasks, 2000)
     return () => {
       cancelled = true
       window.clearInterval(interval)

apps/web/src/lib/api.ts

@@ -1,10 +1,12 @@
-function defaultApiBase(): string {
-  if (typeof window === "undefined") return "http://localhost:8000"
-  return `${window.location.protocol}//${window.location.hostname}:8000`
+function configuredApiBase(): string {
+  const configured = process.env.NEXT_PUBLIC_API_BASE_URL?.trim()
+  if (configured) return configured.replace(/\/$/, "")
+
+  if (typeof window === "undefined") return "http://127.0.0.1:8000"
+  return ""
 }
 
-export const API_BASE =
-  process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, "") || defaultApiBase()
+export const API_BASE = configuredApiBase()
 
 export type StageStatus = "pending" | "running" | "succeeded" | "failed"
 export type TaskStatus = "queued" | "running" | "succeeded" | "failed"