刪除不必要資訊
This commit is contained in:
@@ -1,100 +0,0 @@
|
|||||||
# IP 檢測問題修復總結
|
|
||||||
|
|
||||||
## 問題描述
|
|
||||||
|
|
||||||
用戶報告顯示的 IP 地址 `::ffff:127.0.0.1` 是錯誤的。這個地址實際上是 IPv4 地址 `127.0.0.1`（本地回環地址）的 IPv6 映射格式，這通常表示 IP 檢測或顯示邏輯有問題。
|
|
||||||
|
|
||||||
## 問題原因
|
|
||||||
|
|
||||||
1. **IPv6 格式處理不完整**：雖然 `cleanIpAddress` 函數有處理 `::ffff:` 前綴，但在某些情況下沒有被正確調用
|
|
||||||
2. **本地回環地址處理**：系統返回 `::ffff:127.0.0.1` 而不是 `127.0.0.1`，但顯示邏輯沒有正確轉換
|
|
||||||
3. **IP 來源檢查不完整**：在 API 端點中，當檢測到 `127.0.0.1` 時，沒有正確處理 IPv6 格式的地址
|
|
||||||
|
|
||||||
## 修復方案
|
|
||||||
|
|
||||||
### 1. 改進 `cleanIpAddress` 函數
|
|
||||||
|
|
||||||
在 `lib/ip-utils.ts` 中添加了對純 IPv6 本地回環地址的處理：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// 處理純IPv6本地回環地址
|
|
||||||
if (ip === '::1') {
|
|
||||||
return '127.0.0.1';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 增強 `getDetailedIpInfo` 函數
|
|
||||||
|
|
||||||
添加了額外的 IPv6 格式檢查邏輯：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// 如果沒有找到任何IP，檢查是否有IPv6格式的地址
|
|
||||||
if (allFoundIps.length === 0) {
|
|
||||||
Object.values(ipSources).forEach(ipSource => {
|
|
||||||
if (ipSource) {
|
|
||||||
const ipList = ipSource.toString().split(',').map(ip => ip.trim());
|
|
||||||
ipList.forEach(ip => {
|
|
||||||
// 直接處理IPv6格式的IPv4地址
|
|
||||||
if (ip.startsWith('::ffff:')) {
|
|
||||||
const cleanIp = ip.substring(7);
|
|
||||||
if (isValidIp(cleanIp) && !allFoundIps.includes(cleanIp)) {
|
|
||||||
allFoundIps.push(cleanIp);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 修復 API 端點
|
|
||||||
|
|
||||||
在 `app/api/ip/route.ts` 中改進了 IPv6 格式的處理：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// 處理IPv6格式的IPv4地址
|
|
||||||
let cleanIp = ip;
|
|
||||||
if (ip.startsWith('::ffff:')) {
|
|
||||||
cleanIp = ip.substring(7);
|
|
||||||
}
|
|
||||||
if (cleanIp && cleanIp !== '127.0.0.1' && cleanIp !== '::1' && cleanIp !== 'localhost') {
|
|
||||||
clientIp = cleanIp;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. 創建調試工具
|
|
||||||
|
|
||||||
創建了詳細的 IP 調試頁面 (`app/test/ip-debug/page.tsx`)，可以：
|
|
||||||
- 顯示所有檢測到的 IP 地址
|
|
||||||
- 顯示 IP 來源詳細信息
|
|
||||||
- 顯示原始和最終檢測到的 IP
|
|
||||||
- 提供調試信息
|
|
||||||
|
|
||||||
## 測試方法
|
|
||||||
|
|
||||||
1. **訪問調試頁面**：`/test/ip-debug`
|
|
||||||
2. **檢查 API 端點**：`/api/ip`
|
|
||||||
3. **使用外部測試**：`/test/ip-test`
|
|
||||||
|
|
||||||
## 預期結果
|
|
||||||
|
|
||||||
修復後，系統應該：
|
|
||||||
1. 正確將 `::ffff:127.0.0.1` 轉換為 `127.0.0.1`
|
|
||||||
2. 正確將 `::1` 轉換為 `127.0.0.1`
|
|
||||||
3. 在調試頁面中顯示正確的 IP 地址
|
|
||||||
4. 提供詳細的調試信息幫助診斷問題
|
|
||||||
|
|
||||||
## 本地開發環境說明
|
|
||||||
|
|
||||||
在本地開發環境中，顯示 `127.0.0.1` 是正常的行為，因為：
|
|
||||||
- 所有請求都來自本地回環地址
|
|
||||||
- 這是正常的開發環境行為
|
|
||||||
- 在生產環境中部署後，IP 檢測會更準確
|
|
||||||
|
|
||||||
## 建議
|
|
||||||
|
|
||||||
1. **使用 ngrok 進行外部測試**：`ngrok http 3000`
|
|
||||||
2. **部署到生產環境**：在真實環境中測試 IP 檢測功能
|
|
||||||
3. **檢查網路配置**：確保代理伺服器正確設置 IP 轉發頭
|
|
||||||
4. **使用調試工具**：利用新的調試頁面進行問題診斷
|
|
||||||
@@ -1,214 +0,0 @@
|
|||||||
# IP 白名單功能說明
|
|
||||||
|
|
||||||
## 概述
|
|
||||||
|
|
||||||
IP白名單功能允許你限制只有特定IP地址的用戶才能訪問你的網站。這是一個強大的安全功能，特別適用於內部工具或需要限制訪問的應用程式。
|
|
||||||
|
|
||||||
## 功能特點
|
|
||||||
|
|
||||||
- ✅ **智能IP檢測**：自動檢測真實客戶端IP，支援代理伺服器
|
|
||||||
- ✅ **多種IP格式**：支援單一IP、IP範圍（CIDR）、多個IP
|
|
||||||
- ✅ **地理位置信息**：可選的IP地理位置檢測
|
|
||||||
- ✅ **調試工具**：內建IP檢測調試頁面
|
|
||||||
- ✅ **靈活配置**：可隨時啟用/禁用白名單功能
|
|
||||||
|
|
||||||
## 快速開始
|
|
||||||
|
|
||||||
### 1. 配置環境變數
|
|
||||||
|
|
||||||
複製 `env.template` 為 `.env.local` 並配置以下變數：
|
|
||||||
|
|
||||||
```env
|
|
||||||
# 允許的IP地址（用逗號分隔）
|
|
||||||
ALLOWED_IPS=114.33.18.13,125.229.65.83,60.248.164.91
|
|
||||||
|
|
||||||
# 是否啟用IP白名單檢查
|
|
||||||
ENABLE_IP_WHITELIST=true
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 本地開發配置
|
|
||||||
|
|
||||||
在本地開發時，建議使用以下配置：
|
|
||||||
|
|
||||||
```env
|
|
||||||
# 允許本地訪問
|
|
||||||
ALLOWED_IPS=127.0.0.1,192.168.1.0/24
|
|
||||||
|
|
||||||
# 或者完全禁用IP檢查
|
|
||||||
ENABLE_IP_WHITELIST=false
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 測試IP檢測
|
|
||||||
|
|
||||||
訪問 `/test/ip-debug` 頁面來測試IP檢測功能，查看：
|
|
||||||
- 檢測到的真實IP地址
|
|
||||||
- 所有可能的IP來源
|
|
||||||
- 地理位置信息
|
|
||||||
- 白名單狀態
|
|
||||||
|
|
||||||
## IP 地址格式
|
|
||||||
|
|
||||||
### 支援的格式
|
|
||||||
|
|
||||||
1. **單一IP地址**
|
|
||||||
```
|
|
||||||
192.168.1.100
|
|
||||||
114.33.18.13
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **IP範圍（CIDR格式）**
|
|
||||||
```
|
|
||||||
192.168.1.0/24 # 192.168.1.0 - 192.168.1.255
|
|
||||||
10.0.0.0/8 # 10.0.0.0 - 10.255.255.255
|
|
||||||
172.16.0.0/12 # 172.16.0.0 - 172.31.255.255
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **多個IP地址**
|
|
||||||
```
|
|
||||||
192.168.1.100,10.0.0.50,172.16.0.0/16
|
|
||||||
```
|
|
||||||
|
|
||||||
### 實際範例
|
|
||||||
|
|
||||||
使用 `allowed_ips.txt` 中的IP地址：
|
|
||||||
|
|
||||||
```env
|
|
||||||
ALLOWED_IPS=114.33.18.13,125.229.65.83,60.248.164.91,220.132.236.89,211.72.69.222,219.87.170.253,125.228.50.228
|
|
||||||
```
|
|
||||||
|
|
||||||
## 智能IP檢測
|
|
||||||
|
|
||||||
系統會自動檢測真實的客戶端IP地址，支援以下情況：
|
|
||||||
|
|
||||||
### 代理伺服器支援
|
|
||||||
- Cloudflare (`cf-connecting-ip`)
|
|
||||||
- Nginx (`x-real-ip`)
|
|
||||||
- Apache (`x-forwarded-for`)
|
|
||||||
- 其他常見代理頭
|
|
||||||
|
|
||||||
### 自動過濾
|
|
||||||
- 排除本地回環地址 (`127.0.0.1`, `::1`)
|
|
||||||
- 優先選擇公網IP地址
|
|
||||||
- 處理IPv6格式的IPv4地址
|
|
||||||
|
|
||||||
## 使用場景
|
|
||||||
|
|
||||||
### 1. 內部工具限制
|
|
||||||
```env
|
|
||||||
# 只允許公司內部網路訪問
|
|
||||||
ALLOWED_IPS=192.168.1.0/24,10.0.0.0/8
|
|
||||||
ENABLE_IP_WHITELIST=true
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 特定客戶訪問
|
|
||||||
```env
|
|
||||||
# 只允許特定客戶IP訪問
|
|
||||||
ALLOWED_IPS=203.0.113.1,198.51.100.50
|
|
||||||
ENABLE_IP_WHITELIST=true
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 開發環境
|
|
||||||
```env
|
|
||||||
# 開發時允許所有IP
|
|
||||||
ENABLE_IP_WHITELIST=false
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. 生產環境安全
|
|
||||||
```env
|
|
||||||
# 生產環境嚴格限制
|
|
||||||
ALLOWED_IPS=114.33.18.13,125.229.65.83
|
|
||||||
ENABLE_IP_WHITELIST=true
|
|
||||||
```
|
|
||||||
|
|
||||||
## 調試和故障排除
|
|
||||||
|
|
||||||
### 1. 使用調試頁面
|
|
||||||
訪問 `/test/ip-debug` 查看詳細的IP檢測信息。
|
|
||||||
|
|
||||||
### 2. 常見問題
|
|
||||||
|
|
||||||
**問題：IP顯示為 127.0.0.1**
|
|
||||||
- 解決方案：在本地開發時，將 `127.0.0.1` 加入白名單或禁用IP檢查
|
|
||||||
|
|
||||||
**問題：無法訪問網站**
|
|
||||||
- 檢查：確認你的IP地址在白名單中
|
|
||||||
- 檢查：確認 `ENABLE_IP_WHITELIST=true` 設置正確
|
|
||||||
|
|
||||||
**問題：代理伺服器環境**
|
|
||||||
- 系統會自動檢測代理轉發的真實IP
|
|
||||||
- 如果仍有問題，檢查代理伺服器配置
|
|
||||||
|
|
||||||
### 3. 日誌查看
|
|
||||||
在瀏覽器開發者工具中查看網路請求，或檢查服務器日誌。
|
|
||||||
|
|
||||||
## 安全建議
|
|
||||||
|
|
||||||
1. **定期更新IP列表**：定期檢查和更新允許的IP地址
|
|
||||||
2. **監控訪問日誌**：監控被拒絕的訪問嘗試
|
|
||||||
3. **備用訪問方式**：考慮設定VPN或其他備用訪問方式
|
|
||||||
4. **測試環境**：在測試環境中充分測試IP白名單功能
|
|
||||||
5. **文檔記錄**：記錄所有允許的IP地址和用途
|
|
||||||
|
|
||||||
## API 端點
|
|
||||||
|
|
||||||
### GET /api/ip
|
|
||||||
返回當前客戶端的IP檢測信息：
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"ip": "203.0.113.1",
|
|
||||||
"isAllowed": true,
|
|
||||||
"enableIpWhitelist": true,
|
|
||||||
"allowedIps": ["114.33.18.13", "125.229.65.83"],
|
|
||||||
"timestamp": "2024-01-01T12:00:00.000Z",
|
|
||||||
"debug": {
|
|
||||||
"allIpSources": {
|
|
||||||
"x-forwarded-for": "203.0.113.1",
|
|
||||||
"x-real-ip": null,
|
|
||||||
// ... 其他IP來源
|
|
||||||
},
|
|
||||||
"environment": "production",
|
|
||||||
"host": "example.com",
|
|
||||||
"referer": "https://example.com/"
|
|
||||||
},
|
|
||||||
"location": {
|
|
||||||
"country": "Taiwan",
|
|
||||||
"city": "Taipei",
|
|
||||||
"isp": "Chunghwa Telecom"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 部署注意事項
|
|
||||||
|
|
||||||
### Vercel 部署
|
|
||||||
1. 在 Vercel 項目設置中配置環境變數
|
|
||||||
2. 確保 `ENABLE_IP_WHITELIST` 設置正確
|
|
||||||
3. 測試IP檢測功能是否正常工作
|
|
||||||
|
|
||||||
### 其他平台
|
|
||||||
1. 確保環境變數正確配置
|
|
||||||
2. 測試代理伺服器IP轉發是否正常
|
|
||||||
3. 檢查防火牆和網路配置
|
|
||||||
|
|
||||||
## 相關文件
|
|
||||||
|
|
||||||
- `allowed_ips.txt` - IP地址清單文件
|
|
||||||
- `lib/ip-utils.ts` - IP檢測工具函數
|
|
||||||
- `middleware.ts` - IP白名單中間件
|
|
||||||
- `app/api/ip/route.ts` - IP檢測API
|
|
||||||
- `app/test/ip-debug/page.tsx` - IP調試頁面
|
|
||||||
|
|
||||||
## 技術實現
|
|
||||||
|
|
||||||
### 核心組件
|
|
||||||
- **IP檢測**：`lib/ip-utils.ts` 中的 `getClientIp()` 函數
|
|
||||||
- **白名單檢查**：`isIpAllowed()` 函數支援CIDR範圍
|
|
||||||
- **中間件**：`middleware.ts` 在請求處理前檢查IP
|
|
||||||
- **API端點**：`/api/ip` 提供IP檢測服務
|
|
||||||
|
|
||||||
### 安全機制
|
|
||||||
- 服務器端檢查，客戶端無法繞過
|
|
||||||
- 支援多種代理伺服器配置
|
|
||||||
- 自動過濾無效IP地址
|
|
||||||
- 詳細的訪問日誌記錄
|
|
||||||
@@ -1,141 +0,0 @@
|
|||||||
# IPv4 格式顯示修復
|
|
||||||
|
|
||||||
## 問題描述
|
|
||||||
|
|
||||||
用戶要求確保所有 IP 地址都顯示為 IPv4 格式，而不是 IPv6 格式（如 `::ffff:127.0.0.1`）。
|
|
||||||
|
|
||||||
## 修復方案
|
|
||||||
|
|
||||||
### 1. 改進 IP 顯示組件 (`components/ip-display.tsx`)
|
|
||||||
|
|
||||||
添加了 `cleanIpForDisplay` 函數來確保顯示的 IP 始終是 IPv4 格式：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
function cleanIpForDisplay(ip: string): string {
|
|
||||||
if (!ip) return '127.0.0.1';
|
|
||||||
|
|
||||||
// 移除空白字符
|
|
||||||
ip = ip.trim();
|
|
||||||
|
|
||||||
// 處理IPv6格式的IPv4地址 (例如: ::ffff:192.168.1.1)
|
|
||||||
if (ip.startsWith('::ffff:')) {
|
|
||||||
return ip.substring(7);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 處理純IPv6本地回環地址
|
|
||||||
if (ip === '::1') {
|
|
||||||
return '127.0.0.1';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 驗證是否為有效的IPv4地址
|
|
||||||
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
|
||||||
if (ipv4Regex.test(ip)) {
|
|
||||||
return ip;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果不是有效的IPv4，返回默認值
|
|
||||||
return '127.0.0.1';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 改進 API 端點 (`app/api/ip/route.ts`)
|
|
||||||
|
|
||||||
添加了 `ensureIPv4Format` 函數來確保 API 返回的 IP 始終是 IPv4 格式：
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
function ensureIPv4Format(ip: string): string {
|
|
||||||
if (!ip) return '127.0.0.1';
|
|
||||||
|
|
||||||
// 移除空白字符
|
|
||||||
ip = ip.trim();
|
|
||||||
|
|
||||||
// 處理IPv6格式的IPv4地址
|
|
||||||
if (ip.startsWith('::ffff:')) {
|
|
||||||
return ip.substring(7);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 處理純IPv6本地回環地址
|
|
||||||
if (ip === '::1') {
|
|
||||||
return '127.0.0.1';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 驗證是否為有效的IPv4地址
|
|
||||||
const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
|
||||||
if (ipv4Regex.test(ip)) {
|
|
||||||
return ip;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果不是有效的IPv4，返回默認值
|
|
||||||
return '127.0.0.1';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 創建 IPv4 格式測試頁面 (`app/test/ip-format-test/page.tsx`)
|
|
||||||
|
|
||||||
創建了一個專門的測試頁面來驗證 IPv4 格式轉換功能：
|
|
||||||
|
|
||||||
- 測試各種 IP 地址格式的轉換
|
|
||||||
- 顯示轉換前後的對比
|
|
||||||
- 提供詳細的格式分析
|
|
||||||
- 驗證轉換邏輯的正確性
|
|
||||||
|
|
||||||
## 轉換規則
|
|
||||||
|
|
||||||
### ✅ 正確處理的格式
|
|
||||||
|
|
||||||
| 原始格式 | 轉換後 | 說明 |
|
|
||||||
|---------|--------|------|
|
|
||||||
| `::ffff:127.0.0.1` | `127.0.0.1` | IPv6格式的IPv4地址 |
|
|
||||||
| `::1` | `127.0.0.1` | IPv6本地回環地址 |
|
|
||||||
| `127.0.0.1` | `127.0.0.1` | 標準IPv4地址（保持不變） |
|
|
||||||
| `192.168.1.1` | `192.168.1.1` | 標準IPv4地址（保持不變） |
|
|
||||||
| `::ffff:203.0.113.1` | `203.0.113.1` | IPv6格式的公網IPv4地址 |
|
|
||||||
|
|
||||||
### ⚠️ 無效格式處理
|
|
||||||
|
|
||||||
| 原始格式 | 轉換後 | 說明 |
|
|
||||||
|---------|--------|------|
|
|
||||||
| `invalid-ip` | `127.0.0.1` | 無效格式，返回默認值 |
|
|
||||||
| `localhost` | `127.0.0.1` | 主機名，返回默認值 |
|
|
||||||
| `null` 或 `undefined` | `127.0.0.1` | 空值，返回默認值 |
|
|
||||||
|
|
||||||
## 測試方法
|
|
||||||
|
|
||||||
### 1. 訪問測試頁面
|
|
||||||
```
|
|
||||||
http://localhost:3000/test/ip-format-test
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 檢查 API 響應
|
|
||||||
```
|
|
||||||
http://localhost:3000/api/ip
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 查看實際顯示
|
|
||||||
訪問主頁面，檢查 IP 顯示組件是否顯示 IPv4 格式。
|
|
||||||
|
|
||||||
## 預期結果
|
|
||||||
|
|
||||||
修復後，系統應該：
|
|
||||||
|
|
||||||
1. **始終顯示 IPv4 格式**：無論原始檢測到的 IP 是什麼格式，都轉換為標準 IPv4 格式
|
|
||||||
2. **正確處理 IPv6 格式**：將 `::ffff:127.0.0.1` 轉換為 `127.0.0.1`
|
|
||||||
3. **處理本地回環地址**：將 `::1` 轉換為 `127.0.0.1`
|
|
||||||
4. **保持有效 IPv4 不變**：`192.168.1.1` 等標準 IPv4 地址保持原樣
|
|
||||||
5. **提供默認值**：無效格式返回 `127.0.0.1` 作為默認值
|
|
||||||
|
|
||||||
## 實現位置
|
|
||||||
|
|
||||||
- **前端顯示**：`components/ip-display.tsx`
|
|
||||||
- **API 端點**：`app/api/ip/route.ts`
|
|
||||||
- **測試頁面**：`app/test/ip-format-test/page.tsx`
|
|
||||||
- **調試工具**：`app/test/ip-debug/page.tsx`
|
|
||||||
|
|
||||||
## 驗證
|
|
||||||
|
|
||||||
1. 啟動開發服務器：`npm run dev`
|
|
||||||
2. 訪問 `/test/ip-format-test` 查看格式轉換測試
|
|
||||||
3. 訪問主頁面檢查 IP 顯示是否為 IPv4 格式
|
|
||||||
4. 檢查 API 端點 `/api/ip` 的響應
|
|
||||||
|
|
||||||
現在所有 IP 地址都會以標準的 IPv4 格式顯示，提供一致且易於理解的用戶體驗。
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
# IPv6格式IPv4地址顯示功能
|
|
||||||
|
|
||||||
## 概述
|
|
||||||
|
|
||||||
本專案已實現首頁顯示IPv6格式的IPv4地址功能。當系統檢測到IPv6格式的IPv4地址（如 `::ffff:192.168.1.1`）時，會自動轉換並顯示為標準的IPv4格式，同時提供詳細的IPv6信息。
|
|
||||||
|
|
||||||
## 功能特點
|
|
||||||
|
|
||||||
### 1. 自動IPv6格式檢測
|
|
||||||
- 自動檢測IPv6格式的IPv4地址（`::ffff:` 前綴）
|
|
||||||
- 將IPv6格式轉換為標準IPv4格式顯示
|
|
||||||
- 保留原始IPv6格式信息供參考
|
|
||||||
|
|
||||||
### 2. 雙格式顯示
|
|
||||||
- **主要顯示**: 標準IPv4格式（如 `192.168.1.1`）
|
|
||||||
- **次要顯示**: IPv6映射格式（如 `::ffff:192.168.1.1`）
|
|
||||||
- 支持點擊信息圖標查看詳細信息
|
|
||||||
|
|
||||||
### 3. 響應式設計
|
|
||||||
- **桌面版**: 完整顯示IPv4和IPv6格式
|
|
||||||
- **手機版**: 簡化顯示，標識IP類型（IPv4/IPv6）
|
|
||||||
|
|
||||||
### 4. 詳細信息彈出框
|
|
||||||
點擊信息圖標可查看：
|
|
||||||
- IPv4格式地址
|
|
||||||
- IPv6格式地址
|
|
||||||
- 原始檢測格式
|
|
||||||
- 檢測方法
|
|
||||||
- 所有檢測到的IP列表
|
|
||||||
- IPv6支援狀態
|
|
||||||
|
|
||||||
## 技術實現
|
|
||||||
|
|
||||||
### API端點 (`/api/ip`)
|
|
||||||
```typescript
|
|
||||||
{
|
|
||||||
ip: "192.168.1.1", // 標準IPv4格式
|
|
||||||
ipv6Info: {
|
|
||||||
isIPv6Mapped: true, // 是否為IPv6映射
|
|
||||||
originalFormat: "::ffff:192.168.1.1", // 原始格式
|
|
||||||
ipv6Format: "::ffff:192.168.1.1", // IPv6格式
|
|
||||||
hasIPv6Support: true // IPv6支援狀態
|
|
||||||
},
|
|
||||||
debug: {
|
|
||||||
ipDetectionMethod: "IPv6-Mapped-IPv4", // 檢測方法
|
|
||||||
// ... 其他調試信息
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 組件功能 (`components/ip-display.tsx`)
|
|
||||||
- 自動處理IPv6格式轉換
|
|
||||||
- 提供交互式詳細信息顯示
|
|
||||||
- 支持移動端和桌面端不同顯示模式
|
|
||||||
|
|
||||||
## 使用方式
|
|
||||||
|
|
||||||
### 1. 基本使用
|
|
||||||
```tsx
|
|
||||||
import IpDisplay from "@/components/ip-display"
|
|
||||||
|
|
||||||
// 桌面版完整顯示
|
|
||||||
<IpDisplay />
|
|
||||||
|
|
||||||
// 手機版簡化顯示
|
|
||||||
<IpDisplay mobileSimplified />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 測試頁面
|
|
||||||
訪問 `/test-ipv6` 頁面查看完整功能演示：
|
|
||||||
- IP顯示組件測試
|
|
||||||
- 原始API數據展示
|
|
||||||
- 調試信息查看
|
|
||||||
|
|
||||||
## 支援的IPv6格式
|
|
||||||
|
|
||||||
### 1. IPv6映射IPv4地址
|
|
||||||
- 格式: `::ffff:192.168.1.1`
|
|
||||||
- 自動轉換為: `192.168.1.1`
|
|
||||||
- 顯示類型: IPv6
|
|
||||||
|
|
||||||
### 2. IPv6本地回環地址
|
|
||||||
- 格式: `::1`
|
|
||||||
- 自動轉換為: `127.0.0.1`
|
|
||||||
- 顯示類型: IPv4
|
|
||||||
|
|
||||||
### 3. 標準IPv4地址
|
|
||||||
- 格式: `192.168.1.1`
|
|
||||||
- 保持原格式
|
|
||||||
- 顯示類型: IPv4
|
|
||||||
|
|
||||||
## 配置選項
|
|
||||||
|
|
||||||
### 環境變數
|
|
||||||
```env
|
|
||||||
# IP白名單功能
|
|
||||||
ENABLE_IP_WHITELIST=true
|
|
||||||
ALLOWED_IPS=192.168.1.0/24,10.0.0.0/8
|
|
||||||
```
|
|
||||||
|
|
||||||
### 組件屬性
|
|
||||||
```tsx
|
|
||||||
interface IpDisplayProps {
|
|
||||||
mobileSimplified?: boolean // 是否使用手機版簡化顯示
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## 故障排除
|
|
||||||
|
|
||||||
### 1. 顯示為127.0.0.1
|
|
||||||
- 檢查是否在本地開發環境
|
|
||||||
- 確認網路配置
|
|
||||||
- 檢查代理伺服器設置
|
|
||||||
|
|
||||||
### 2. IPv6格式未正確轉換
|
|
||||||
- 確認API端點正常運行
|
|
||||||
- 檢查瀏覽器控制台錯誤
|
|
||||||
- 驗證網路請求狀態
|
|
||||||
|
|
||||||
### 3. 詳細信息彈出框不顯示
|
|
||||||
- 確認JavaScript已啟用
|
|
||||||
- 檢查CSS樣式是否正確載入
|
|
||||||
- 驗證組件狀態管理
|
|
||||||
|
|
||||||
## 開發說明
|
|
||||||
|
|
||||||
### 1. 本地開發
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
# 訪問 http://localhost:3000
|
|
||||||
# 測試頁面: http://localhost:3000/test-ipv6
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 生產部署
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
npm start
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 自定義樣式
|
|
||||||
組件使用Tailwind CSS，可通過修改類名自定義外觀：
|
|
||||||
- 背景色: `bg-slate-800/50`
|
|
||||||
- 邊框: `border-blue-800/30`
|
|
||||||
- 文字顏色: `text-blue-200`
|
|
||||||
|
|
||||||
## 更新日誌
|
|
||||||
|
|
||||||
### v1.0.0 (當前版本)
|
|
||||||
- ✅ 實現IPv6格式IPv4地址自動檢測
|
|
||||||
- ✅ 添加雙格式顯示功能
|
|
||||||
- ✅ 實現響應式設計
|
|
||||||
- ✅ 添加詳細信息彈出框
|
|
||||||
- ✅ 創建測試頁面
|
|
||||||
- ✅ 完善API端點支援
|
|
||||||
|
|
||||||
## 未來計劃
|
|
||||||
|
|
||||||
- [ ] 添加更多IPv6格式支援
|
|
||||||
- [ ] 實現IP地理位置顯示
|
|
||||||
- [ ] 添加IP歷史記錄功能
|
|
||||||
- [ ] 支援自定義主題
|
|
||||||
- [ ] 添加更多調試工具
|
|
||||||
78
check_ip.ps1
78
check_ip.ps1
@@ -1,78 +0,0 @@
|
|||||||
# IP地址檢查和設定腳本
|
|
||||||
# 檢查當前IP地址並與允許清單比較
|
|
||||||
|
|
||||||
Write-Host "=== IP地址檢查工具 ===" -ForegroundColor Green
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 獲取本地IP地址
|
|
||||||
Write-Host "本地網路IP地址:" -ForegroundColor Yellow
|
|
||||||
$localIPs = Get-NetIPAddress | Where-Object {$_.AddressFamily -eq "IPv4" -and $_.IPAddress -notlike "127.*" -and $_.IPAddress -notlike "169.*"} | Select-Object IPAddress, InterfaceAlias
|
|
||||||
foreach ($ip in $localIPs) {
|
|
||||||
Write-Host " $($ip.IPAddress) - $($ip.InterfaceAlias)" -ForegroundColor Cyan
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 獲取外部IP地址
|
|
||||||
Write-Host "外部IP地址:" -ForegroundColor Yellow
|
|
||||||
try {
|
|
||||||
$externalIP = (Invoke-WebRequest -Uri "https://ifconfig.me" -UseBasicParsing).Content
|
|
||||||
Write-Host " $externalIP" -ForegroundColor Cyan
|
|
||||||
} catch {
|
|
||||||
Write-Host " 無法獲取外部IP地址" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 允許的IP清單
|
|
||||||
$allowedIPs = @(
|
|
||||||
"114.33.18.13", # 岡山 Hinet
|
|
||||||
"125.229.65.83", # 汐止
|
|
||||||
"60.248.164.91", # 汐止
|
|
||||||
"220.132.236.89", # 新竹
|
|
||||||
"211.72.69.222", # 新竹
|
|
||||||
"219.87.170.253", # 璟茂
|
|
||||||
"114.40.30.219", # zhaoi
|
|
||||||
"125.228.50.228" # 璟茂
|
|
||||||
)
|
|
||||||
|
|
||||||
Write-Host "允許的IP清單:" -ForegroundColor Yellow
|
|
||||||
foreach ($ip in $allowedIPs) {
|
|
||||||
Write-Host " $ip" -ForegroundColor White
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 檢查當前IP是否在允許清單中
|
|
||||||
$currentIP = $externalIP
|
|
||||||
if ($allowedIPs -contains $currentIP) {
|
|
||||||
Write-Host "✅ 當前IP ($currentIP) 在允許清單中" -ForegroundColor Green
|
|
||||||
} else {
|
|
||||||
Write-Host "❌ 當前IP ($currentIP) 不在允許清單中" -ForegroundColor Red
|
|
||||||
Write-Host "請聯繫管理員將 $currentIP 加入允許清單" -ForegroundColor Yellow
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 檢查網路連接
|
|
||||||
Write-Host "網路連接測試:" -ForegroundColor Yellow
|
|
||||||
$testIPs = @("8.8.8.8", "1.1.1.1", "114.33.18.13")
|
|
||||||
foreach ($testIP in $testIPs) {
|
|
||||||
try {
|
|
||||||
$ping = Test-Connection -ComputerName $testIP -Count 1 -Quiet
|
|
||||||
if ($ping) {
|
|
||||||
Write-Host " ✅ $testIP - 連接正常" -ForegroundColor Green
|
|
||||||
} else {
|
|
||||||
Write-Host " ❌ $testIP - 連接失敗" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
Write-Host " ❌ $testIP - 連接失敗" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "=== 故障排除建議 ===" -ForegroundColor Green
|
|
||||||
Write-Host "1. 如果顯示127.0.0.1，請檢查應用程式綁定設定" -ForegroundColor White
|
|
||||||
Write-Host "2. 確保網路連接正常" -ForegroundColor White
|
|
||||||
Write-Host "3. 檢查防火牆設定" -ForegroundColor White
|
|
||||||
Write-Host "4. 確認VPN連接狀態" -ForegroundColor White
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
# IP地址檢查和設定腳本 - 修正版
|
|
||||||
# 檢查當前IP地址並與允許清單比較
|
|
||||||
|
|
||||||
Write-Host "=== IP地址檢查工具 ===" -ForegroundColor Green
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 獲取本地IP地址
|
|
||||||
Write-Host "本地網路IP地址:" -ForegroundColor Yellow
|
|
||||||
$localIPs = Get-NetIPAddress | Where-Object {$_.AddressFamily -eq "IPv4" -and $_.IPAddress -notlike "127.*" -and $_.IPAddress -notlike "169.*"} | Select-Object IPAddress, InterfaceAlias
|
|
||||||
foreach ($ip in $localIPs) {
|
|
||||||
Write-Host " $($ip.IPAddress) - $($ip.InterfaceAlias)" -ForegroundColor Cyan
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 獲取外部IP地址 - 修正版
|
|
||||||
Write-Host "外部IP地址:" -ForegroundColor Yellow
|
|
||||||
try {
|
|
||||||
$externalIP = (Invoke-WebRequest -Uri "https://ifconfig.me/ip" -UseBasicParsing).Content.Trim()
|
|
||||||
Write-Host " $externalIP" -ForegroundColor Cyan
|
|
||||||
} catch {
|
|
||||||
Write-Host " 無法獲取外部IP地址" -ForegroundColor Red
|
|
||||||
$externalIP = "未知"
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 允許的IP清單
|
|
||||||
$allowedIPs = @(
|
|
||||||
"114.33.18.13", # 岡山 Hinet
|
|
||||||
"125.229.65.83", # 汐止
|
|
||||||
"60.248.164.91", # 汐止
|
|
||||||
"220.132.236.89", # 新竹
|
|
||||||
"211.72.69.222", # 新竹
|
|
||||||
"219.87.170.253", # 璟茂
|
|
||||||
"125.228.50.228" # 璟茂
|
|
||||||
)
|
|
||||||
|
|
||||||
Write-Host "允許的IP清單:" -ForegroundColor Yellow
|
|
||||||
foreach ($ip in $allowedIPs) {
|
|
||||||
Write-Host " $ip" -ForegroundColor White
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 檢查當前IP是否在允許清單中
|
|
||||||
if ($externalIP -ne "未知" -and $allowedIPs -contains $externalIP) {
|
|
||||||
Write-Host "✅ 當前IP ($externalIP) 在允許清單中" -ForegroundColor Green
|
|
||||||
} elseif ($externalIP -ne "未知") {
|
|
||||||
Write-Host "❌ 當前IP ($externalIP) 不在允許清單中" -ForegroundColor Red
|
|
||||||
Write-Host "請聯繫管理員將 $externalIP 加入允許清單" -ForegroundColor Yellow
|
|
||||||
} else {
|
|
||||||
Write-Host "⚠️ 無法確定當前IP地址" -ForegroundColor Yellow
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 檢查網路連接
|
|
||||||
Write-Host "網路連接測試:" -ForegroundColor Yellow
|
|
||||||
$testIPs = @("8.8.8.8", "1.1.1.1", "114.33.18.13")
|
|
||||||
foreach ($testIP in $testIPs) {
|
|
||||||
try {
|
|
||||||
$ping = Test-Connection -ComputerName $testIP -Count 1 -Quiet
|
|
||||||
if ($ping) {
|
|
||||||
Write-Host " ✅ $testIP - 連接正常" -ForegroundColor Green
|
|
||||||
} else {
|
|
||||||
Write-Host " ❌ $testIP - 連接失敗" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
Write-Host " ❌ $testIP - 連接失敗" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "=== 故障排除建議 ===" -ForegroundColor Green
|
|
||||||
Write-Host "1. 如果顯示127.0.0.1，請檢查應用程式綁定設定" -ForegroundColor White
|
|
||||||
Write-Host "2. 確保網路連接正常" -ForegroundColor White
|
|
||||||
Write-Host "3. 檢查防火牆設定" -ForegroundColor White
|
|
||||||
Write-Host "4. 確認VPN連接狀態" -ForegroundColor White
|
|
||||||
Write-Host "5. 檢查DNS設定" -ForegroundColor White
|
|
||||||
110
diagnose_127.ps1
110
diagnose_127.ps1
@@ -1,110 +0,0 @@
|
|||||||
# 診斷 127.0.0.1 問題的腳本
|
|
||||||
# 檢查應用程式綁定和網路配置
|
|
||||||
|
|
||||||
Write-Host "=== 127.0.0.1 問題診斷工具 ===" -ForegroundColor Green
|
|
||||||
Write-Host ""
|
|
||||||
|
|
||||||
# 1. 檢查當前運行的服務
|
|
||||||
Write-Host "1. 檢查當前運行的服務:" -ForegroundColor Yellow
|
|
||||||
$services = Get-Service | Where-Object {$_.Status -eq "Running"} | Select-Object Name, DisplayName
|
|
||||||
Write-Host " 運行中的服務數量: $($services.Count)" -ForegroundColor Cyan
|
|
||||||
|
|
||||||
# 2. 檢查監聽的端口
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "2. 檢查監聽的端口:" -ForegroundColor Yellow
|
|
||||||
$listening = netstat -an | Select-String "LISTENING"
|
|
||||||
if ($listening) {
|
|
||||||
Write-Host " 發現監聽端口:" -ForegroundColor Cyan
|
|
||||||
$listening | ForEach-Object {
|
|
||||||
Write-Host " $_" -ForegroundColor White
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
Write-Host " 沒有發現監聽端口" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
|
|
||||||
# 3. 檢查常見的Web服務
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "3. 檢查常見的Web服務:" -ForegroundColor Yellow
|
|
||||||
|
|
||||||
# 檢查 IIS
|
|
||||||
$iis = Get-Service -Name "W3SVC" -ErrorAction SilentlyContinue
|
|
||||||
if ($iis) {
|
|
||||||
Write-Host " IIS 狀態: $($iis.Status)" -ForegroundColor Cyan
|
|
||||||
} else {
|
|
||||||
Write-Host " IIS: 未安裝或未運行" -ForegroundColor Gray
|
|
||||||
}
|
|
||||||
|
|
||||||
# 檢查 Apache
|
|
||||||
$apache = Get-Process -Name "httpd" -ErrorAction SilentlyContinue
|
|
||||||
if ($apache) {
|
|
||||||
Write-Host " Apache: 正在運行" -ForegroundColor Cyan
|
|
||||||
} else {
|
|
||||||
Write-Host " Apache: 未運行" -ForegroundColor Gray
|
|
||||||
}
|
|
||||||
|
|
||||||
# 檢查 Node.js
|
|
||||||
$node = Get-Process -Name "node" -ErrorAction SilentlyContinue
|
|
||||||
if ($node) {
|
|
||||||
Write-Host " Node.js: 正在運行 (PID: $($node.Id))" -ForegroundColor Cyan
|
|
||||||
} else {
|
|
||||||
Write-Host " Node.js: 未運行" -ForegroundColor Gray
|
|
||||||
}
|
|
||||||
|
|
||||||
# 檢查 Python
|
|
||||||
$python = Get-Process -Name "python*" -ErrorAction SilentlyContinue
|
|
||||||
if ($python) {
|
|
||||||
Write-Host " Python: 正在運行 (PID: $($python.Id))" -ForegroundColor Cyan
|
|
||||||
} else {
|
|
||||||
Write-Host " Python: 未運行" -ForegroundColor Gray
|
|
||||||
}
|
|
||||||
|
|
||||||
# 4. 檢查網路配置
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "4. 網路配置檢查:" -ForegroundColor Yellow
|
|
||||||
$interfaces = Get-NetIPAddress | Where-Object {$_.AddressFamily -eq "IPv4" -and $_.IPAddress -notlike "127.*"} | Select-Object IPAddress, InterfaceAlias
|
|
||||||
Write-Host " 可用網路介面:" -ForegroundColor Cyan
|
|
||||||
foreach ($if in $interfaces) {
|
|
||||||
Write-Host " $($if.IPAddress) - $($if.InterfaceAlias)" -ForegroundColor White
|
|
||||||
}
|
|
||||||
|
|
||||||
# 5. 檢查防火牆設定
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "5. 防火牆檢查:" -ForegroundColor Yellow
|
|
||||||
$firewall = Get-NetFirewallProfile | Select-Object Name, Enabled
|
|
||||||
foreach ($profile in $firewall) {
|
|
||||||
$status = if ($profile.Enabled) { "啟用" } else { "停用" }
|
|
||||||
Write-Host " $($profile.Name): $status" -ForegroundColor Cyan
|
|
||||||
}
|
|
||||||
|
|
||||||
# 6. 常見解決方案
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "=== 常見解決方案 ===" -ForegroundColor Green
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "如果您的應用程式顯示 127.0.0.1，請嘗試以下解決方案:" -ForegroundColor Yellow
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "1. 檢查應用程式配置文件:" -ForegroundColor Cyan
|
|
||||||
Write-Host " - 確保綁定到 0.0.0.0 而不是 127.0.0.1" -ForegroundColor White
|
|
||||||
Write-Host " - 檢查 host 設定" -ForegroundColor White
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "2. 常見的配置修改:" -ForegroundColor Cyan
|
|
||||||
Write-Host " Node.js: app.listen(3000, '0.0.0.0')" -ForegroundColor White
|
|
||||||
Write-Host " Python Flask: app.run(host='0.0.0.0')" -ForegroundColor White
|
|
||||||
Write-Host " Apache: Listen 0.0.0.0:80" -ForegroundColor White
|
|
||||||
Write-Host " Nginx: listen 80;" -ForegroundColor White
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "3. 檢查應用程式是否正在運行:" -ForegroundColor Cyan
|
|
||||||
Write-Host " - 確認應用程式進程存在" -ForegroundColor White
|
|
||||||
Write-Host " - 檢查錯誤日誌" -ForegroundColor White
|
|
||||||
Write-Host " - 確認端口沒有被其他程式佔用" -ForegroundColor White
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "4. 網路測試:" -ForegroundColor Cyan
|
|
||||||
Write-Host " - 測試本地連接: telnet 127.0.0.1 [port]" -ForegroundColor White
|
|
||||||
Write-Host " - 測試外部連接: telnet [your-ip] [port]" -ForegroundColor White
|
|
||||||
|
|
||||||
Write-Host ""
|
|
||||||
Write-Host "請告訴我您使用的是哪種應用程式，我可以提供更具體的解決方案。" -ForegroundColor Green
|
|
||||||
Reference in New Issue
Block a user