Dify 本地开发：前端代理转发解决 401 问题-尧图网站建设

📅 发布时间：2026/6/18 20:24:15

一、问题背景

场景

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

六、注意事项 / 踩坑总结

代理模式下 不要使用：

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 是最省事、最稳定的解决方案

Dify 本地开发：前端代理转发解决 401 问题