This content originally appeared on DEV Community and was authored by ian chen
📌 什麼是 Netlify？
Netlify 是一個現代化的前端部署平台，支援 CI/CD、自動部署、靜態資源託管、Function 無伺服器後端、以及提供 HTTPS、網域綁定等功能，特別適合前端工程或靜態網頁代管。
🧩 為什麼用來代管 Proxy 頁面？
許多開發者使用 Netlify 來架設簡易 Proxy 或中繼頁面，主要優點如下：
- ✅ 免費方案就能支援自定網域與 HTTPS
- 🚀 架設簡單，直接將 HTML 上傳即可
- 🔧 支援
netlify.toml設定 Rewrite/Redirect 規則 - 🌍 全球 CDN 分發，速度快且穩定
- 🔒 自動產生 Let's Encrypt SSL 憑證
🛠 如何建立簡易 Proxy 中繼頁
- 準備 HTML/JS 頁面（或用 Function）
- 建立 GitHub Repo 或本地專案
-
登入 app.netlify.com →
Add new site -
設定
netlify.toml：
[[redirects]]
from = "/proxy/*"
to = "/.netlify/functions/proxy/:splat"
status = 200
force = true
🌐 解決 CORS 問題（使用 Netlify Functions）
若你要從前端 Fetch 其他網域的資料，會遇到 CORS 限制。這時你可以透過 Netlify 的 Serverless Function 作為後端代理，來避免 CORS 問題。
➕ 步驟一：建立 netlify/functions/proxy.js
// netlify/functions/proxy.js
const fetch = require("node-fetch");
exports.handler = async function (event) {
const url = event.path.replace("/.netlify/functions/proxy/", "");
const targetUrl = decodeURIComponent(url);
try {
const response = await fetch(targetUrl);
const data = await response.text();
return {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin": "*", // 解決 CORS
"Content-Type": response.headers.get("content-type") || "text/plain",
},
body: data,
};
} catch (err) {
return {
statusCode: 500,
body: `Proxy Error: ${err.message}`,
};
}
};
➕ 步驟二：設定 netlify.toml
[build]
functions = "netlify/functions"
[[redirects]]
from = "/proxy/*"
to = "/.netlify/functions/proxy/:splat"
status = 200
🧪 測試方式（JavaScript）
fetch("https://你的 netlify 網址/proxy/https%3A%2F%2Fexample.com%2Fapi")
.then(res => res.json())
.then(data => console.log(data));
🔐 安全注意事項
- 僅允許特定網域：你可以在 Function 中加白名單或驗證 Referer
- 加上金鑰驗證或 API 防刷機制（避免被濫用）
📝 結語
Netlify 結合 Functions 可輕鬆打造具有 Proxy 功能的頁面，並解決常見的 CORS 問題，非常適合部署前端測試用的中繼 API 或跨域資料轉發。
💡 建議使用自己的 domain 加上防濫用機制，避免 proxy 被公用。
This content originally appeared on DEV Community and was authored by ian chen
ian chen | Sciencx (2025-06-25T07:36:08+00:00) Netlify 作為 Proxy 網頁代管平台介紹 + 解決 CORS 問題教學. Retrieved from https://www.scien.cx/2025/06/25/netlify-%e4%bd%9c%e7%82%ba-proxy-%e7%b6%b2%e9%a0%81%e4%bb%a3%e7%ae%a1%e5%b9%b3%e5%8f%b0%e4%bb%8b%e7%b4%b9-%e8%a7%a3%e6%b1%ba-cors-%e5%95%8f%e9%a1%8c%e6%95%99%e5%ad%b8/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.