██FR█████ █INTELL███████████

Netlify 作為 Proxy 網頁代管平台介紹 + 解決 CORS 問題教學


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 中繼頁

  1. 準備 HTML/JS 頁面（或用 Function）
  2. 建立 GitHub Repo 或本地專案
  3. 登入 app.netlify.com → Add new site
  4. 設定 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