# 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 限制
**解決狀態**: ✅ 已提供完整解決方案