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进行内网穿透测试了！
|