a13ff70055
- 实现邮箱验证码登录功能，支持自动注册新用户 - 修复验证码生成逻辑，确保前后端验证码一致 - 添加腾讯云SES webhook回调接口，支持6种邮件事件 - 配置ngrok内网穿透支持，允许外部访问 - 优化登录页面UI，采用全屏背景和居中布局 - 清理调试代码和未使用的导入 - 添加完整的配置文档和测试脚本
94 lines
2.3 KiB
Markdown
94 lines
2.3 KiB
Markdown
# 内网穿透配置完成
|
||
|
||
## ✅ **已完成的配置修改**
|
||
|
||
### 🎨 **前端配置 (vite.config.js)**
|
||
```javascript
|
||
server: {
|
||
port: 5173,
|
||
host: '0.0.0.0', // 允许外部访问
|
||
allowedHosts: true, // 允许所有主机访问
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8080',
|
||
changeOrigin: true,
|
||
secure: false,
|
||
// ... 其他配置
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 🔧 **后端配置 (SecurityConfig.java)**
|
||
```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**
|
||
```bash
|
||
# 穿透前端端口
|
||
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`**：
|
||
```javascript
|
||
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域名模式匹配
|
||
- 生产环境建议限制具体的域名
|
||
|
||
## 📝 **注意事项**
|
||
|
||
1. **ngrok免费版限制**：
|
||
- 每次重启ngrok，域名会变化
|
||
- 需要重新配置前端API地址
|
||
|
||
2. **HTTPS证书**：
|
||
- ngrok提供HTTPS，但证书可能不被信任
|
||
- 浏览器可能显示安全警告
|
||
|
||
3. **网络延迟**：
|
||
- 通过ngrok访问会有额外延迟
|
||
- 建议在本地测试完成后再使用ngrok
|
||
|
||
现在您可以安全地使用ngrok进行内网穿透测试了！
|