經典榮格 Classic Jung

聯絡我們表單：Turnstile、Cloudflare Worker 與 Resend 除錯手冊

本手冊記錄 jungian16types.com 靜態網站聯絡表單的服務串接方式與排查步驟。表單使用 Cloudflare Turnstile 防濫用，由 Cloudflare Worker 驗證 token，再透過 Resend 寄送通知郵件。

安全提醒：Resend API key 與 Turnstile secret 只應存放在 Cloudflare Worker 的環境變數／Secrets。不要放進網站 HTML、JavaScript、GitHub repository、截圖或公開訊息。Sitekey 是前端公開值，可以出現在表單 HTML。

串接流程

1. 訪客在網站填寫姓名、電郵、主題與詳細內容，並完成 Turnstile。
2. 網頁從 Turnstile 欄位取得 cf-turnstile-response token。
3. 網頁向 https://jungian16types-contact.vienor2.workers.dev/ 發送 JSON POST，內容包含表單欄位及 turnstileToken。
4. Worker 檢查來源網站、欄位與 Turnstile token；驗證成功後呼叫 Resend API。
5. Resend 使用已驗證網域的寄件地址 contact@jungian16types.com，將表單內容寄到 hktypologyassociation@gmail.com。訪客填寫的電郵地址用作回覆地址。

相關網站檔案：/about/（來源檔 page-1137.html，表單標記、Sitekey、Worker URL 與前端提交處理）。

已知設定

• Turnstile 前端 Sitekey：0x4AAAAAAFTyXNAHMhFh_bLm
• Worker endpoint：https://jungian16types-contact.vienor2.workers.dev/
• 正式網站來源：https://jungian16types.com、https://www.jungian16types.com
• GitHub Pages 預覽來源：https://eggyor.github.io
• Resend 寄件者：Jungian16Types <contact@jungian16types.com>
• 表單收件者：hktypologyassociation@gmail.com
• 允許的主題：理論問題、網頁營運、商討合作

以上是除錯時用來比對的設定。若日後更換網域、Worker 或收件信箱，要同步更新對應設定。

Turnstile 設定與排查

在 Cloudflare Dashboard 的 Turnstile 找到網站使用的 widget：

1. 確認它是目前表單 Sitekey 對應的 widget。
2. 在 Hostname Management 中加入實際測試的主機名稱，例如 jungian16types.com、www.jungian16types.com 及 eggyor.github.io。只填主機名稱，不要加 https:// 或路徑。
3. 儲存後重新載入表單頁面；測試時可用無痕視窗排除快取或擴充套件干擾。
4. Worker 也會核對 Turnstile 回傳的 hostname。正式網域與 GitHub Pages 預覽主機必須與 Worker 核准清單相符。

畫面顯示「無法連線至網站／疑難排解」時：

• 先確認目前瀏覽器網址的主機名稱已列入 widget 的 Hostname Management。
• 確認頁面以 HTTPS 開啟，且沒有廣告阻擋器、隱私擴充套件、防火牆或 VPN 阻擋 challenges.cloudflare.com。
• 重新載入或換無痕視窗測試。若仍失敗，開發者工具的 Network 面板可確認 Turnstile API 請求是否被封鎖。
• 測試 GitHub Pages 專案網站時，主機名稱是 eggyor.github.io；路徑 /jungian16types/ 不屬於 hostname。

Worker 回覆驗證失敗（常見為 403）時：

• 確認表單用的是相同 widget 的 Sitekey，且提交前取得了非空 token。
• 確認 hostname allowlist 同時涵蓋目前預覽或正式網站的 hostname。
• token 通常只能短時間使用一次；不要重送同一個舊 token。重新完成驗證再提交。
• 檢查 Worker 日誌中的 Turnstile Siteverify 回應；不要把 secret 或完整敏感請求內容貼到公開地方。

Cloudflare Worker 設定與排查

Worker 名稱目前為 jungian16types-contact，公開 endpoint 如上。Worker 負責伺服器端驗證及寄信，瀏覽器不應直接呼叫 Resend。

Worker 至少需要以下 Secrets／環境變數：

• TURNSTILE_SECRET：Cloudflare Turnstile 後台提供的 Secret key。
• RESEND_API_KEY：Resend 的 API key。

在 Cloudflare Dashboard 開啟 Workers & Pages → jungian16types-contact → Settings → Variables and Secrets（介面名稱可能略有不同），確認兩個值存在並以 Secret 類型保存。新增或更新後，確認 Worker 已部署最新版本。

Worker 的來源網站 allowlist 應包括需要使用表單的來源：

• https://jungian16types.com
• https://www.jungian16types.com
• https://eggyor.github.io

如果更改網站主機名稱，要更新 allowlist。瀏覽器跨來源請求的 Origin 是「協定 + 主機名稱」，不包含路徑及結尾的專案子路徑。

排查線索：

• 瀏覽器顯示 CORS 或 OPTIONS preflight 錯誤：比對瀏覽器 Network 面板中的 Origin 與 Worker allowlist，並確認 OPTIONS 回應有允許的來源、POST/OPTIONS 方法及 Content-Type 標頭。
• Worker 回覆「不允許的網站來源」：目前頁面的 Origin 不在 allowlist，或協定／hostname 不一致。
• Worker 回覆郵件服務錯誤：檢查 RESEND_API_KEY Secret 是否正確、Worker 是否已部署，並查看 Worker 日誌與 Resend API 的錯誤內容。
• Worker 回覆處理失敗：查看 Worker 日誌是否有 JSON 解析、網路連線或上游服務錯誤。
• 切勿把 Secret 寫入 page-1137.html 或其他前端程式碼。

Resend 設定與排查

1. 在 Resend 的 Domains 頁面確認 jungian16types.com 狀態為 Verified。這表示此網域已可作為寄件網域。
2. 確認 Worker 的寄件者使用已驗證網域內的地址：contact@jungian16types.com。
3. 確認 Worker 的收件者是 hktypologyassociation@gmail.com。
4. 若無郵件，先查 Resend 的 Emails／Logs，確認請求是否到達、狀態是否成功或被拒絕，再檢查收件匣、垃圾郵件及篩選規則。
5. 若 Resend 回報寄件者未驗證或拒絕寄送，核對寄件地址的網域拼字、Resend domain verification 狀態與 Worker 實際部署版本。

網域已驗證代表 Resend 可以代表該網域寄信；這不會自動建立一個可登入收信的郵箱。收件地址是表單通知要送達的郵箱。

建議的測試順序

1. 開啟目前要測試的正式或預覽表單網址，記下網址中的 hostname。
2. 確認 Turnstile widget 對該 hostname 已啟用，完成驗證後再填妥欄位提交。
3. 確認畫面回報成功，並查看 Resend Emails／Logs 是否出現寄送紀錄。
4. 確認 hktypologyassociation@gmail.com 收到郵件，主旨、表單欄位與回覆地址合理。
5. 再測試一次故意未完成 Turnstile 的提交，應被阻擋且不應寄出郵件。
6. 若修改了 GitHub 上的前端檔案，確認 Pages workflow 成功部署後再測。Worker 的程式或 Secrets 更新則需在 Cloudflare 重新部署／套用。

快速定位表

症狀	優先檢查
Turnstile 顯示無法連線	Widget hostname、challenges.cloudflare.com 網路封鎖、擴充套件、HTTPS
點提交後提示驗證失敗	Sitekey 是否匹配、hostname allowlist、token 是否過期或重用、Worker 的 Turnstile secret
瀏覽器報 CORS／preflight	Worker Origin allowlist、OPTIONS 回應與回應標頭
Worker 回覆 502／郵件服務錯誤	Resend API key Secret、寄件網域驗證、Resend Logs
畫面顯示成功但找不到信	Resend Logs、收件匣垃圾郵件、收件地址與郵件規則
只在 GitHub Pages 預覽失敗	eggyor.github.io 是否加入 Turnstile hostname 與 Worker Origin allowlist

最後更新：2026-10-11