E2E_PROXY_SETUP.md 5.4 KB

Raw Blame History Permalink



E2E 测试代理配置说明


🌐 架构说明

E2E 测试通过 Vite 反向代理 访问测试服务器，而不是直接访问。

┌─────────────────┐
│  Playwright     │
│  E2E Tests      │
└────────┬────────┘
         │
         │ http://localhost:5173/*
         ↓
┌─────────────────┐
│  Vite Dev       │
│  Server         │
│  (localhost:5173)│
└────────┬────────┘
         │
         │ /srv/api/*
         ↓ (反向代理)
┌─────────────────┐
│  Test Server    │
│  oa-dev.onwall  │
│  .cn            │
└─────────────────┘


📝 配置文件


1. Vite 配置

vite.config.js:

server: {
  host: '0.0.0.0',
  port: viteEnv.VITE_PORT,
  proxy: createProxy(
    viteEnv.VITE_PROXY_PREFIX,
    viteEnv.VITE_PROXY_TARGET
  )
}


2. 环境变量

.env.development:

# 代理前缀
VITE_PROXY_PREFIX = /srv/

# 代理目标（测试服务器）
VITE_PROXY_TARGET = http://oa-dev.onwall.cn/


.env:

VITE_PROXY_PREFIX = /srv/


3. Playwright 配置

playwright.config.js:

export default defineConfig({
  use: {
    // 使用本地开发服务器
    baseURL: 'http://localhost:5173',
  },

  // 自动启动本地开发服务器
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
    timeout: 120 * 1000,
  },
})


🔄 请求流程


API 请求

1. Playwright: page.request('/srv/api/login')
   ↓
2. Vite 接收请求
   ↓
3. Vite 代理到: http://oa-dev.onwall.cn/srv/api/login
   ↓
4. 测试服务器处理并返回
   ↓
5. Vite 转发响应
   ↓
6. Playwright 接收响应


静态资源

1. Playwright: page.goto('/login')
   ↓
2. Vite 直接返回: index.html
   ↓
3. Playwright 渲染页面


🧪 验证代理配置


检查方法 1: 查看 Vite 日志

# 启动开发服务器
pnpm dev

# 输出应包含：
# Local: http://localhost:5173/
# Proxy: /srv -> http://oa-dev.onwall.cn/srv


检查方法 2: 使用浏览器开发者工具


访问 http://localhost:5173

打开开发者工具 (F12)
切换到 Network 标签
触发登录流程
查看 /srv/api/* 请求


预期结果:


请求 URL: http://localhost:5173/srv/api/login

实际请求: http://oa-dev.onwall.cn/srv/api/login

状态码: 200


检查方法 3: 运行 Playwright 测试

# 运行测试
pnpm test:e2e e2e/auth.spec.js --headed

# 观察浏览器操作，确认：
# 1. 访问 localhost:5173
# 2. 输入手机号
# 3. 点击"发送验证码"
# 4. 网络请求显示 /srv/api/send-sms


⚙️ 代理配置详解


createProxy 函数

build/proxy.js:

export function createProxy(prefix, target) {
  const ret = {}
  ret[prefix] = {
    target, // 代理目标
    changeOrigin: true, // 修改请求头的 origin
    ws: true, // 支持 WebSocket
  }
  return ret
}


参数说明:


prefix: /srv/ - 需要代理的路径前缀

target: http://oa-dev.onwall.cn/ - 代理目标服务器

changeOrigin: true - 修改请求头的 origin 为目标服务器的 origin

ws: true - 支持 WebSocket 代理


代理示例

请求:

POST http://localhost:5173/srv/api/send-sms
Content-Type: application/json

{
  "phone": "13761653761"
}


Vite 转换为:

POST http://oa-dev.onwall.cn/srv/api/send-sms
Host: oa-dev.onwall.cn
Origin: http://oa-dev.onwall.cn

{
  "phone": "13761653761"
}


🚀 启动测试


方式 1: 自动启动（推荐）

# Playwright 自动启动 Vite 开发服务器
pnpm test:e2e


优点:


自动化管理
测试完成后自动关闭
CI/CD 友好


方式 2: 手动启动

# 终端 1: 启动开发服务器
pnpm dev

# 终端 2: 运行测试
pnpm test:e2e


优点:


可以看到服务器日志
方便调试


🔧 常见问题


1. 代理不生效

检查:

# 确认 .env.development 配置正确
cat .env.development | grep PROXY

# 应该输出：
# VITE_PROXY_PREFIX = /srv/
# VITE_PROXY_TARGET = http://oa-dev.onwall.cn/


解决:


重启 Vite 开发服务器
清除浏览器缓存
检查 Vite 配置文件


2. CORS 错误

原因: 跨域请求被阻止

解决:


Vite 的 changeOrigin: true 会自动处理 CORS
确保使用代理前缀 /srv/

不要直接请求 http://oa-dev.onwall.cn


3. API 请求 404

检查:

// ✓ 正确 - 使用代理前缀
await fetch('/srv/api/login')

// ✗ 错误 - 直接访问测试服务器
await fetch('http://oa-dev.onwall.cn/api/login')

// ✗ 错误 - 缺少代理前缀
await fetch('/api/login')


4. WebSocket 连接失败

检查:


Vite 配置中 ws: true 已启用
代理前缀正确
测试服务器支持 WebSocket


📚 相关文档


Vite 代理配置
Playwright webServer
项目 CLAUDE.md
E2E 测试指南


🔗 链接


本地开发服务器: http://localhost:5173


测试服务器: http://oa-dev.onwall.cn


代理前缀: /srv/