Express.js CORSミドルウェア設定

Express.jsでcors npmパッケージを設定する完全ガイド。オリジン許可リスト、動的オリジン、認証情報、プリフライト、ルートごとのCORSを解説します。

Framework Config

詳細な説明

Express.js CORSとcorsパッケージ

cors npmパッケージはExpressでCORSを処理する標準的な方法です。オリジンの検証、ヘッダーの設定、OPTIONSの処理の複雑さをクリーンなミドルウェアAPIにまとめています。

インストール

npm install cors

基本的な使用法 — 全オリジン許可

const cors = require("cors");
app.use(cors()); // Access-Control-Allow-Origin: * と同等

本番環境セットアップ — 特定オリジン

const corsOptions = {
  origin: ["https://app.example.com", "https://admin.example.com"],
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
  exposedHeaders: ["X-Request-Id", "X-Total-Count"],
  credentials: true,
  maxAge: 3600,
};

app.use(cors(corsOptions));

動的オリジン検証

const corsOptions = {
  origin: (origin, callback) => {
    if (!origin) return callback(null, true);

    const allowed = /^https:\/\/.*\.example\.com$/.test(origin);
    if (allowed) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
  credentials: true,
};

ルートごとのCORS

// パブリックエンドポイント — 完全オープン
app.get("/api/public", cors(), handler);

// プライベートエンドポイント — 制限付き
app.put("/api/private", cors(corsOptions), handler);

ミドルウェアの順序

CORSミドルウェアは認証やレート制限ミドルウェアの前に配置する必要があります。そうしないと、プリフライトOPTIONSリクエストがCORSヘッダー設定前に拒否されます:

app.use(cors(corsOptions));    // 1. CORS最初
app.use(rateLimiter);          // 2. レート制限
app.use(authMiddleware);       // 3. 認証
app.use("/api", apiRouter);    // 4. ルート

ユースケース

Node.jsバックエンド開発者が、別のドメインでホストされるReactフロントエンドから消費される新しいExpress APIをセットアップしています。最初のデプロイ前にCORSを正しく設定する必要があります。

試してみる — CORS Header Builder

フルツールを開く