Files

meowrain 05669a6570 feat(global-header): 重构全局头部组件及样式优化

- 完全重写 GlobalHeader 组件结构，改用 div 语义及自定义样式替代原antd a-menu
- 新增 Logo 区域包含图标和标题，支持点击跳转首页功能
- 实现导航菜单动态渲染，根据路由权限过滤显示
- 用户区域支持未登录和已登录两种状态切换
- 未登录时展示登录、注册按钮，支持路由跳转
- 已登录时显示用户头像、用户名及下拉菜单，包含个人中心、设置和退出登录操作
- 引入 Arco Design 图标组件优化视觉表现
- 完善登出流程，清理本地Token并提示用户
- 优化响应式布局和交互体验，提升用户界面整体一致性与可用性

2025-12-14 16:19:28 +08:00

5.2 KiB

Raw Permalink Blame History

API 代理配置说明

配置完成

✅ 已成功配置 Vite API 代理转发功能

配置详情

1. Vite 代理配置 (vite.config.ts)

server: {
  host: "0.0.0.0",
  port: 3000,
  open: true,
  // API 代理配置
  proxy: {
    // 代理所有 /api 开头的请求
    '/api': {
      target: 'http://localhost:8085',  // 后端服务器地址
      changeOrigin: true,                // 改变请求头中的 origin
      secure: false,                     // 支持 https
    },
  },
}

2. 环境配置更新 (.env.dev)

VITE_API_URL=/api  # 改为相对路径，使用代理

工作原理

前端请求流程：
┌─────────────┐
│  前端应用    │
│ localhost:3001 │
└──────┬──────┘
       │ 请求: /api/v1/auth/login
       ↓
┌──────────────┐
│  Vite 代理   │
│ 自动转发     │
└──────┬───────┘
       │ 转发到: http://localhost:8085/api/v1/auth/login
       ↓
┌──────────────┐
│  后端服务器   │
│ localhost:8085 │
└──────────────┘

请求示例

前端发起请求：

// axios baseURL 为 '/api'
await login({ userAccount: 'admin', userPassword: 'password' })

// 实际请求 URL: http://localhost:3001/api/v1/auth/login

Vite 代理自动转发：

http://localhost:3001/api/v1/auth/login
           ↓
http://localhost:8085/api/v1/auth/login

配置说明

proxy 配置项

target: 后端服务器地址（http://localhost:8085）
changeOrigin: 修改请求头的 origin，避免后端 CORS 限制
secure: 是否验证 SSL 证书（开发环境设为 false）
rewrite: （可选）重写请求路径

路径重写示例

如果后端 API 不包含 /api 前缀，可以使用 rewrite：

proxy: {
  '/api': {
    target: 'http://localhost:8085',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
  },
}

这样前端请求 /api/v1/auth/login 会被转发为 http://localhost:8085/v1/auth/login

已配置的 API

根据后端文档 (auth-api.md)，以下接口已配置代理：

✅ POST /api/v1/auth/login - 用户登录
✅ POST /api/v1/auth/refresh - 刷新令牌
✅ POST /api/v1/auth/auth - 获取访问令牌
✅ POST /api/v1/auth/validate - 验证令牌

跨域问题解决

开发环境

✅ 使用 Vite 代理转发，不会有跨域问题

生产环境

生产环境需要在后端配置 CORS，或者使用 Nginx 反向代理：

Nginx 配置示例：

server {
    listen 80;
    server_name your-domain.com;

    # 前端静态文件
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理
    location /api {
        proxy_pass http://localhost:8085;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

测试代理

1. 启动后端服务

确保后端服务运行在 localhost:8085

2. 启动前端开发服务器

npm run dev

服务器现在运行在：http://localhost:3001

3. 测试登录功能

访问：http://localhost:3001/#/user/login

尝试登录，查看网络请求：

请求 URL 应该是：http://localhost:3001/api/v1/auth/login
Vite 会自动转发到：http://localhost:8085/api/v1/auth/login

4. 查看代理日志

在浏览器开发者工具的 Network 标签中，可以看到：

Request URL: http://localhost:3001/api/v1/auth/login
如果代理成功，会收到来自 localhost:8085 的响应

常见问题

Q1: 代理不生效？

确认修改配置后重启了开发服务器
检查请求 URL 是否以 /api 开头
查看控制台是否有错误信息

Q2: 后端服务连接失败？

确认后端服务正在运行：http://localhost:8085
尝试直接访问后端 API 测试
检查防火墙设置

Q3: 收到 CORS 错误？

开发环境不应该有 CORS 问题，因为使用了代理
如果仍有问题，检查 changeOrigin: true 是否设置

Q4: 需要代理多个后端服务？

proxy: {
  '/api': {
    target: 'http://localhost:8085',
    changeOrigin: true,
  },
  '/auth': {
    target: 'http://localhost:8086',
    changeOrigin: true,
  },
}

环境差异

环境	API URL	说明
开发环境	`/api`	使用 Vite 代理转发到 localhost:8085
生产环境	`https://api.your-domain.com`	直接请求生产环境 API

下一步

✅ 代理配置已完成
⏳ 启动后端服务（端口 8085）
⏳ 测试登录功能
⏳ 验证 API 调用是否正常

5.2 KiB Raw Permalink Blame History Unescape Escape