Express 常用中間件：內建解析器與精選第三方導覽

在掌握了中間件的運作原理後，你會發現許多常見的需求（如解析 JSON、處理 Cookie、架設靜態網站）其實 Express 及其社群已經準備好了大量的標準組件。

1. 內建資料解析器 (Built-in Parsers)

在 Express 4.x 之後，你不再需要額外安裝 body-parser，核心框架已內建了最常用的解析功能：

  • express.json()：解析內容類型為 application/json 的請求。
  • express.urlencoded()：解析由 HTML 表單送出的資料。
const express = require('express');
const app = express();

// 啟動解析功能 (務必放在路由定義之前)
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/api/users', (req, res) => {
  // 現在你可以輕鬆存取解析後的物件
  console.log('接收到 JSON 資料：', req.body);
  res.status(201).send('用戶已建立');
});

2. 靜態檔案服務 (Static Server)

如果你需要讓瀏覽器存取圖片、CSS、或 JavaScript 檔案，不需要手動寫路由，使用 express.static 即可快速架設。

const path = require('path');

// 指向專案中的 'public' 資料夾
app.use(express.static(path.join(__dirname, 'public')));

[!TIP] 訪問時網址不包含 public。例如檔案在 public/css/style.css，則訪問網址為 http://localhost:3000/css/style.css。

3. 精選社群必備套件

除了內建功能，以下是生產環境中幾乎「標配」的第三方中間件：

Morgan：自動化請求日誌

在控制台輸出漂亮的 HTTP 請求記錄，是除錯的好幫手。

const morgan = require('morgan');
app.use(morgan('dev')); // 輸出包含狀態碼、耗時、回應長度的日誌

CORS：解決跨來源問題

如果你的前後端不在同一個網域下，必裝此套件以處理跨域安全限制。

const cors = require('cors');
app.use(cors()); // 預設開放所有來源

Helmet：強化安全性

它能自動幫你設定多個對安全性至關重要的 HTTP Headers（如防止點擊劫持、防止資源跨站竊取）。

const helmet = require('helmet');
app.use(helmet());

const cookieParser = require('cookie-parser');
app.use(cookieParser());
// 之後可透過 req.cookies 讀取客戶端的 Cookie

專業配置清單

一個標準的 Express 專案啟動區塊通常如下：

app.use(helmet()); // 安全第一
app.use(cors()); // 跨域支援
app.use(morgan('dev')); // 開發日誌
app.use(express.static('public')); // 靜態資源
app.use(express.json()); // 解析 JSON

總結

  1. 優先使用 express.json() 取代過時的第三方解析套件。
  2. 靜態資源建議統一放入一個目錄並由 express.static 統一派送。
  3. 部署前，務必安裝 helmet 來提升應用的基礎防禦力。