# 内网穿透配置完成

## ✅ **已完成的配置修改**

### 🎨 **前端配置 (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进行内网穿透测试了！