一、问题背景
场景
- Dify 后端已部署（如
http://10.31.14.57:8083） - 前端代码下载到本地（
localhost:3000） - 本地启动前端，访问远程后端接口
现象
- 登录页 / 控制台接口返回 401 Unauthorized
- Network 中
/console/api/*请求被拒绝
二、问题根因分析
Dify Console（管理后台）不是纯 API 调用，而是：
-
基于 Session + Cookie
-
严格校验：
- Origin / Referer
- Cookie 是否同源
- CSRF
本地开发时的真实结构
前端：http://localhost:3000
后端：http://10.31.14.57:8083
👉 浏览器视角是跨域请求，导致：
- Cookie 不携带
- Session 失效
- 后端返回 401
三、解决思路：前端代理转发（推荐方案）
核心思想
让浏览器“以为”前端和后端是同源
通过 Next.js 的 rewrites（反向代理）：
浏览器 → localhost:3000 → 本地代理 → 远程 Dify 后端
效果：
- 浏览器无跨域
- Cookie 自动生效
- 后端无需额外配置
- 401 问题直接解决
四、具体实现步骤（标准做法）
1️⃣ 修改 next.config.js
在 Dify 前端项目根目录：
/** @type {import('next').NextConfig} */
const nextConfig = {async rewrites() {return [{source: '/console/api/:path*',destination: 'http://10.31.14.57:8083/console/api/:path*',},{source: '/api/:path*',destination: 'http://10.31.14.57:8083/api/:path*',},]},
}module.exports = nextConfig
说明
| 路径 | 用途 |
|---|---|
/console/api/* |
Dify 控制台（登录、workspace、应用管理） |
/api/* |
WebApp / Chat API |
2️⃣ 配置前端 .env.local
NEXT_PUBLIC_API_PREFIX=/console/api
NEXT_PUBLIC_PUBLIC_API_PREFIX=/api
❗ 不要写 IP / 域名，必须是相对路径
3️⃣ 启动前端
pnpm dev
浏览器访问：
http://localhost:3000
五、验证是否生效
1️⃣ Network 检查
-
请求 URL：
http://localhost:3000/console/api/xxx -
状态码：
- ✅ 200
- ❌ 不再出现 401
2️⃣ 后端日志
-
不再出现：
- Unauthorized
- Invalid origin
- Missing session
六、注意事项 / 踩坑总结
❗ 1. 不要再配置 Cookie 跨域
代理模式下 不要使用：
NEXT_PUBLIC_COOKIE_DOMAIN=1
否则可能引发：
- Cookie 异常
- 登录态丢失
❗ 2. 后端地址必须能直连
代理本质是 Node 转发，先确认：
curl http://10.31.14.57:8083/console/api/workspaces/current
能通，代理才有意义。
❗ 3. 这是「开发方案」，不是生产方案
| 环境 | 建议 |
|---|---|
| 本地开发 | ✅ Next.js rewrites |
| 生产环境 | Nginx / 同域部署 |
七、适用场景总结
✅ 适合：
- 本地调试 Dify 前端
- 使用远程 / 测试环境后端
- 不想改后端配置
- 快速解决 401 / CORS / Cookie 问题
❌ 不适合：
- 生产部署
- SaaS 正式环境
八、一句话总结
Dify 本地前端 401，本质是跨域 + Session 问题
Next.js rewrites 是最省事、最稳定的解决方案