刪除不必要資訊
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