深入淺出 CORS：打破跨域限制

CORS（Cross-Origin Resource Sharing）是一種網頁標準，用於允許網頁在一個域中執行跨域請求，從另一個域名獲取資源。這在現代 Web 開發中至關重要，因為單一域名無法滿足複雜應用程序的需求。CORS 通過添加 HTTP 標頭來通知瀏覽器允許不同來源的請求，在保護安全的同時增加應用的靈活性。

在伺服器端設定 CORS 通常涉及加設 Access-Control-Allow-Origin HTTP 標頭，這告訴瀏覽器允許的來源。例如，允許特定來源的設定如下：

Access-Control-Allow-Origin: https://example.com

這樣可以讓 https://example.com 的網頁訪問伺服器資源。如果允許任何來源，可以使用通配符：

Access-Control-Allow-Origin: *

應注意，使用通配符可能降低安全性，應慎選使用。

當執行某些類型的 HTTP 請求（例如 DELETE、PUT）或自訂的 Content-Type，瀏覽器會首先送出一個 OPTIONS 方法的預檢請求來確認伺服器允許該行為。此行為，以檢查允許的 HTTP 方法，伺服器需返回適當的標頭：

Access-Control-Allow-Methods: GET, POST, OPTIONS

這樣可確保伺服器正確回應瀏覽器發起的預檢請求。

如果前端發起的請求需要發送自訂的 HTTP 標頭，像是授權標頭，則必須明確在伺服器設置 Access-Control-Allow-Headers，以允許這些標頭的傳遞：

Access-Control-Allow-Headers: Content-Type, Authorization

此設置能夠允許客制化的 HTTP 請求標頭，不會被瀏覽器阻擋，是確保 CORS 高效且安全的最佳實踐之一。

CORS 雖然提升了不同域間共享資源的便利，卻也帶來了安全風險。若未謹慎設定，可能導致敏感資料暴露。一個常見的錯誤是將 Access-Control-Allow-Origin 設為全部允許（*）。安全的做法是僅允許受信任的域，并注意不要在回應中回傳敏感資料，保持應用層的穩固防護。

在 Node.js 使用 Express.js 設定 CORS 是一個普遍的做法。使用 cors 中介軟體（middleware），可以簡化操作：

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({ origin: 'https://example.com' }));

app.get('/', (req, res) => {
  res.send('CORS enabled');
});

app.listen(3000);

此程式碼片段設置了允許來自 https://example.com 的請求，如果有多域需求，可根據規範設定更多來源。

在前端 JavaScript 應用中，例如正使用的 Vue.js 或 React.js，通常會遇到跨域問題。為了避免這些問題，開發階段可以利用代理服務器（proxy server），在 vue.config.js 進行代理設置：

module.exports = {
  devServer: {
    proxy: 'https://api.example.com'
  }
};

這樣前端開發時請求將被轉發至正確的 API 端點，避免瀏覽器的 CORS 限制。

面對 CORS 問題時，通常會看到瀏覽器控制台報告的錯誤。解決這些問題一般從反向查找 HTTP 標頭的配置入手。檢查是否適當設置了 Access-Control-Allow-* 欄位，並查看伺服器是否正確返回了這些標頭。此外，利用瀏覽器開發者工具網路攔截器來比較預期與實際的 HTTP 響應式較有效率的調試方法之一。

開發者可以利用一些瀏覽器擴充功能來模擬不同的 CORS 設置。這在初步開發階段非常有用，如此可以快速進行測試，而不需實際變更後端。擴展等於提供了一個方便的環境來驗證如何配置 CORS 標頭以進行某些測試。但在生產環境中，仍然需確保伺服器配置的嚴謹性。

在產業實務中，CORS 應用需要平衡安全與便利。最重要的是，任何時候都應避免全域開放的設置（如 *），並具體指定允許的來源與方法。伺服器端設定必須配合整體應用架構與資料流向，以確保在任何情況下的信息傳遞安全。掌握這些細緻的技巧，將使前端工程師的開發工作更加順利。