DonaldFang 方士碩
29c1633e49
- Database schema with MySQL support - LLM API integration (Gemini 2.5 Flash, DeepSeek, OpenAI) - Error handling with copyable error messages - CORS fix for API calls - Complete setup documentation 🤖 Generated with Claude Code https://claude.com/claude-code Co-Authored-By: Claude <noreply@anthropic.com>
237 lines
4.9 KiB
Markdown
237 lines
4.9 KiB
Markdown
# Gemini API Referrer 錯誤解決方案
|
||
|
||
## 🔴 錯誤訊息
|
||
|
||
```json
|
||
{
|
||
"error": {
|
||
"code": 403,
|
||
"message": "Requests from referer \u003cempty\u003e are blocked.",
|
||
"status": "PERMISSION_DENIED",
|
||
"details": [
|
||
{
|
||
"@type": "type.googleapis.com/google.rpc.ErrorInfo",
|
||
"reason": "API_KEY_HTTP_REFERRER_BLOCKED"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📋 問題原因
|
||
|
||
Gemini API Key 有 **HTTP Referrer 限制**，這是 Google 的安全機制。當從服務器端調用時，HTTP Referrer 為空，導致請求被阻擋。
|
||
|
||
---
|
||
|
||
## ✅ 解決方案
|
||
|
||
### 方案 1: 修改 Gemini API Key 設定（推薦）
|
||
|
||
1. **訪問 Google AI Studio**
|
||
https://makersuite.google.com/app/apikey
|
||
|
||
2. **找到您的 API Key**
|
||
|
||
3. **點擊「Edit API Key」或創建新的 API Key**
|
||
|
||
4. **設定 Application restrictions**
|
||
- 選擇 **"None"** 或 **"IP addresses"**
|
||
- **不要**選擇 "HTTP referrers (websites)"
|
||
|
||
5. **保存設定**
|
||
|
||
6. **更新 .env 文件**
|
||
```env
|
||
GEMINI_API_KEY=your_new_unrestricted_api_key
|
||
```
|
||
|
||
7. **重啟 Flask 服務器**
|
||
```bash
|
||
# 按 Ctrl+C 停止服務器
|
||
python start_server.py
|
||
```
|
||
|
||
---
|
||
|
||
### 方案 2: 使用其他 LLM API（臨時解決）
|
||
|
||
如果您有其他 LLM API Key，可以暫時使用：
|
||
|
||
#### 選項 A: 使用 DeepSeek
|
||
|
||
1. **獲取 DeepSeek API Key**
|
||
https://www.deepseek.com/
|
||
|
||
2. **添加到 .env**
|
||
```env
|
||
DEEPSEEK_API_KEY=your_deepseek_api_key
|
||
```
|
||
|
||
3. **修改默認 API**
|
||
編輯 `index.html`，找到 `callClaudeAPI` 調用，改為：
|
||
```javascript
|
||
const result = await callClaudeAPI(prompt, 'deepseek');
|
||
```
|
||
|
||
#### 選項 B: 使用 OpenAI
|
||
|
||
1. **獲取 OpenAI API Key**
|
||
https://platform.openai.com/api-keys
|
||
|
||
2. **添加到 .env**
|
||
```env
|
||
OPENAI_API_KEY=your_openai_api_key
|
||
```
|
||
|
||
3. **修改默認 API**
|
||
編輯 `index.html`，找到 `callClaudeAPI` 調用，改為：
|
||
```javascript
|
||
const result = await callClaudeAPI(prompt, 'openai');
|
||
```
|
||
|
||
---
|
||
|
||
### 方案 3: 創建 API 選擇器（最佳長期方案）
|
||
|
||
讓用戶在前端選擇要使用的 LLM API。
|
||
|
||
我可以幫您添加一個下拉選單，讓用戶可以在 Gemini、DeepSeek 和 OpenAI 之間切換。
|
||
|
||
---
|
||
|
||
## 🔍 驗證修正
|
||
|
||
### 測試 API 連線
|
||
|
||
訪問測試頁面：http://127.0.0.1:5000/api-test
|
||
|
||
點擊每個 API 的「🧪 測試連線」按鈕，查看哪些 API 可用。
|
||
|
||
### 成功的表現
|
||
|
||
- ✅ API 測試顯示「✓ 連線成功」
|
||
- ✅ 瀏覽器不再顯示 403 錯誤
|
||
- ✅ AI 自動填充功能正常工作
|
||
|
||
---
|
||
|
||
## 📝 詳細錯誤訊息說明
|
||
|
||
您在截圖中看到的錯誤：
|
||
|
||
```
|
||
"reason": "API_KEY_HTTP_REFERRER_BLOCKED"
|
||
```
|
||
|
||
這表示：
|
||
- Gemini API Key 設定了 HTTP Referrer 限制
|
||
- 服務器端請求沒有 Referrer，被 Google 阻擋
|
||
- 需要移除 Referrer 限制或使用其他 API
|
||
|
||
---
|
||
|
||
## 🎯 推薦操作順序
|
||
|
||
### 立即操作（5 分鐘）
|
||
|
||
1. **使用 DeepSeek 或 OpenAI**（臨時解決）
|
||
```bash
|
||
# 編輯 .env 添加其他 API Key
|
||
# 重啟服務器
|
||
python start_server.py
|
||
```
|
||
|
||
2. **測試頁面重新載入**
|
||
- 按 Ctrl+F5 刷新
|
||
- 測試 AI 功能
|
||
|
||
### 長期解決（10 分鐘）
|
||
|
||
1. **修改 Gemini API Key 設定**
|
||
- 訪問 Google AI Studio
|
||
- 移除 HTTP Referrer 限制
|
||
- 創建新的無限制 API Key
|
||
|
||
2. **更新配置**
|
||
- 更新 .env 文件
|
||
- 重啟服務器
|
||
|
||
3. **全面測試**
|
||
- 測試所有 API
|
||
- 確保都能正常工作
|
||
|
||
---
|
||
|
||
## 💡 補充說明
|
||
|
||
### 為什麼服務器端請求沒有 Referrer？
|
||
|
||
當從 Python Flask 後端調用 API 時：
|
||
- HTTP 請求是由服務器發出的
|
||
- 沒有瀏覽器上下文
|
||
- Referer header 為空或不存在
|
||
- Google 的安全機制會阻擋這類請求
|
||
|
||
### 如何避免這個問題？
|
||
|
||
1. **使用無限制的 API Key**（推薦）
|
||
2. **使用 IP 地址限制**而非 Referrer 限制
|
||
3. **使用服務帳戶**（企業方案）
|
||
|
||
---
|
||
|
||
## 🆘 仍然有問題？
|
||
|
||
### 如果修改 API Key 後還是不行
|
||
|
||
1. **檢查 API Key 是否生效**
|
||
- 等待 1-2 分鐘
|
||
- Google 的設定更新需要時間
|
||
|
||
2. **確認 .env 文件正確**
|
||
```bash
|
||
# 查看 .env 內容
|
||
type .env
|
||
```
|
||
|
||
3. **重啟服務器**
|
||
```bash
|
||
# 完全停止後重新啟動
|
||
python start_server.py
|
||
```
|
||
|
||
4. **清除瀏覽器緩存**
|
||
- 按 Ctrl+Shift+Delete
|
||
- 清除緩存和 Cookie
|
||
- 重新載入頁面
|
||
|
||
---
|
||
|
||
## 📊 API 對比
|
||
|
||
| API | 優點 | 缺點 | 推薦度 |
|
||
|-----|------|------|--------|
|
||
| **Gemini** | 免費額度高，速度快 | Referrer 限制問題 | ⭐⭐⭐ |
|
||
| **DeepSeek** | 便宜，中文支持好 | 需要付費 | ⭐⭐⭐⭐ |
|
||
| **OpenAI** | 穩定，功能強大 | 價格較高 | ⭐⭐⭐⭐⭐ |
|
||
|
||
---
|
||
|
||
## ✅ 完成檢查清單
|
||
|
||
修正完成後，請檢查：
|
||
|
||
- [ ] 至少一個 LLM API 測試成功
|
||
- [ ] AI 自動填充功能正常
|
||
- [ ] 沒有 403 錯誤
|
||
- [ ] 錯誤訊息可以完整顯示和複製
|
||
- [ ] 瀏覽器控制台沒有錯誤
|
||
|
||
---
|
||
|
||
**文件版本**: 1.0
|
||
**最後更新**: 2024-12-04
|
||
**問題類型**: Gemini API HTTP Referrer 限制
|
||
**解決狀態**: ✅ 已提供完整解決方案
|