30天用React打造AI工具箱 Day29

昨天整理完前端架構，今天來講一個更痛的主題——API串接。
如果你也有試過自己接OpenAI或Hugging Face的API，大概知道那種「明明程式看起來沒錯，卻一直報CORS錯」的絕望感。

為什麼要自己開Proxy

一開始我直接在前端呼叫API，結果被瀏覽器擋爆。
後來才知道問題出在CORS。
OpenAI那邊會覺得：「你哪位？」

所以我乾脆自己開一個小伺服器，用來幫前端「轉送」請求。
這樣前端就不會直接暴露API Key，也能通過CORS限制。

app.post("/api/chat", async (req, res) => {
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify(req.body),
  })
  const data = await response.json()
  res.status(response.status).json(data)
})

錯誤處理的重要性

API錯誤有時候不是你程式寫錯，而是：

• 模型太忙（429 Too Many Requests）
• Key過期或被Ban
• JSON格式不合

我後來加了一段try/catch，讓畫面至少會顯示「伺服器回應錯誤」，不至於整個白畫面：

try {
  const response = await fetch("/api/chat", { ... })
  if (!response.ok) throw new Error(`API錯誤：${response.status}`)
} catch (err) {
  setError(`⚠️ 聊天失敗：${err.message}`)
}

前後端分工的體悟

以前我只寫前端，對後端的印象都是覺得麻煩。
但做了這個Proxy Server之後，我發現有些問題，
前端是永遠解不掉的，得靠後端幫一手。
像CORS、API安全性這類事，靠server一行設定就能解，
硬要在前端繞半天反而更浪費時間。
這一篇算是我在API串接上最痛、但也成長最多的一段。

現在的我：

• 不怕CORS錯誤
• 知道怎麼安全地放API Key
• 也學會怎麼Debug網路請求