a13ff70055
- 实现邮箱验证码登录功能，支持自动注册新用户 - 修复验证码生成逻辑，确保前后端验证码一致 - 添加腾讯云SES webhook回调接口，支持6种邮件事件 - 配置ngrok内网穿透支持，允许外部访问 - 优化登录页面UI，采用全屏背景和居中布局 - 清理调试代码和未使用的导入 - 添加完整的配置文档和测试脚本
2.3 KiB
2.3 KiB
内网穿透配置完成
✅ 已完成的配置修改
🎨 前端配置 (vite.config.js)
server: {
port: 5173,
host: '0.0.0.0', // 允许外部访问
allowedHosts: true, // 允许所有主机访问
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
secure: false,
// ... 其他配置
}
}
}
🔧 后端配置 (SecurityConfig.java)
// 允许前端开发服务器和ngrok域名
configuration.setAllowedOrigins(Arrays.asList(
"http://localhost:3000",
"http://127.0.0.1:3000",
"http://localhost:5173",
"http://127.0.0.1:5173",
"https://*.ngrok.io",
"https://*.ngrok-free.app"
));
configuration.setAllowedOriginPatterns(Arrays.asList(
"https://*.ngrok.io",
"https://*.ngrok-free.app"
));
🚀 使用步骤
1️⃣ 启动ngrok
# 穿透前端端口
ngrok http 5173
# 穿透后端端口
ngrok http 8080
2️⃣ 获取ngrok地址
ngrok会显示类似：
Forwarding https://abc123.ngrok.io -> http://localhost:5173
Forwarding https://def456.ngrok.io -> http://localhost:8080
3️⃣ 修改前端API配置
需要将前端代码中的API地址改为ngrok地址：
修改 demo/frontend/src/api/request.js：
baseURL: 'https://你的后端ngrok地址.ngrok.io/api'
修改 demo/frontend/src/views/Login.vue：
- 第151行：
'https://你的后端ngrok地址.ngrok.io/api/verification/email/send' - 第223行：
'https://你的后端ngrok地址.ngrok.io/api/auth/login/email'
4️⃣ 测试访问
- 前端：
https://abc123.ngrok.io - 后端API：
https://def456.ngrok.io/api
🔒 安全说明
allowedHosts: true允许所有主机访问（仅开发环境）- CORS配置支持ngrok域名模式匹配
- 生产环境建议限制具体的域名
📝 注意事项
-
ngrok免费版限制：
- 每次重启ngrok，域名会变化
- 需要重新配置前端API地址
-
HTTPS证书：
- ngrok提供HTTPS，但证书可能不被信任
- 浏览器可能显示安全警告
-
网络延迟：
- 通过ngrok访问会有额外延迟
- 建议在本地测试完成后再使用ngrok
现在您可以安全地使用ngrok进行内网穿透测试了！