ExpressのCORSエラーを解決する方法（corsあり・なし）

CORSエラー（「No 'Access-Control-Allow-Origin' header is present」）は、http://localhost:5173 のようなあるオリジンのWebページが別のオリジンにあるAPIを呼び、レスポンスがそのオリジンを許可すると言っていなかったために、ブラウザがページにレスポンスを読ませなかったことを意味します。直すのはサーバー側です。ページのオリジンを入れた Access-Control-Allow-Origin を送り、ブラウザのプリフライトの OPTIONS リクエストには受け付けるメソッドとヘッダーで答えます。Expressなら数行のミドルウェアか、cors パッケージの app.use(cors()) で済みます。

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

const ALLOWED_ORIGIN = 'https://app.example.com';

function cors(req, res, next) {
    res.set('Access-Control-Allow-Origin', ALLOWED_ORIGIN);
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
        res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
        res.set('Access-Control-Max-Age', '600');
        return res.sendStatus(204);
    }
    next();
}

app.use(cors);

app.get('/api/products', (req, res) => {
    res.json([{ id: 1, name: 'Lamp' }]);
});

app.put('/api/products/:id', (req, res) => {
    res.json({ updated: req.params.id });
});

// GET /api/products
app.listen(3000);

レスポンスは商品の一覧で、Headersタブには access-control-allow-origin: https://app.example.com と表示されます。そのオリジンのページなら読んでよいということです。次に、ヘッダー Origin: https://app.example.com と Access-Control-Request-Method: PUT を付けて OPTIONS /api/products/1 を送ってください。これはブラウザが PUT の前に送るプリフライトで、返事は許可するメソッドとヘッダーを持つ、ボディのない 204 です。

ブラウザが確認するもの

同一オリジンのページなら何もいりません。クロスオリジンのリクエストでは、ブラウザは次のレスポンスヘッダーを読みます。

単純なGETやフォーム形式のPOSTはそのままサーバーに届き、ブラウザは返事の Access-Control-Allow-Origin を確認します。サーバーはどちらにしてもリクエストを実行します。CORSが決めるのは、ページが結果を見られるかどうかだけです。JSONのボディ、Authorization ヘッダー、PUT や DELETE のようなメソッドを持つリクエストの前にはプリフライトの OPTIONS リクエストが送られ、プリフライトの返事が許可したときだけ本番のリクエストが送られます。だからCORSのミドルウェアは、どのルートや認証チェックよりも先に OPTIONS に答えなければなりません。

複数のオリジンを、Cookie付きで許可する

Access-Control-Allow-Origin に入るのは1つのオリジンか * で、リストは入りません。複数を許可するには、リクエストの Origin ヘッダーを許可リストと比べ、一致したらそれをそのまま返します。

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

const allowed = new Set(['https://app.example.com', 'http://localhost:5173']);

app.use((req, res, next) => {
    const origin = req.get('origin');
    if (origin && allowed.has(origin)) {
        res.set('Access-Control-Allow-Origin', origin);
        res.set('Access-Control-Allow-Credentials', 'true');
    }
    res.set('Vary', 'Origin');
    if (req.method === 'OPTIONS') {
        res.set('Access-Control-Allow-Methods', 'GET, POST');
        res.set('Access-Control-Allow-Headers', 'Content-Type');
        return res.sendStatus(204);
    }
    next();
});

app.get('/api/me', (req, res) => {
    res.json({ origin: req.get('origin') ?? null });
});

app.listen(3000);

最初のリクエストには、curlや同一オリジンのページからの呼び出しと同じく Origin ヘッダーがないので、{"origin":null} が返り、CORSのヘッダーは付きません。ヘッダー Origin: http://localhost:5173 を付けて GET /api/me を送ると、Headersタブにはそのオリジンがそのまま返されているのと、access-control-allow-credentials: true が表示されます。ヘッダーを Origin: https://evil.example に変えると、2つのCORSヘッダーはどちらも消えます。サーバーは答えますが、ブラウザならページにそれを読ませません。Access-Control-Allow-Credentials: true があるとページはCookieを送れます（fetch(url, { credentials: 'include' }) で）。ブラウザはこれと * の組み合わせを拒否するので、Cookieを使うなら常に正確なオリジンが必要です。

corsパッケージ

cors パッケージは同じことをオプションで行います。npm install cors でインストールします。

const cors = require('cors');

// Any origin, no cookies: fine for a public read-only API.
app.use(cors());

// Only your frontend, with cookies.
app.use(cors({
    origin: ['https://app.example.com', 'http://localhost:5173'],
    credentials: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
}));

// One route only.
app.get('/api/public', cors(), handler);

オプションなしで呼ぶと、cors() は Access-Control-Allow-Origin: * を送り、すべてのプリフライトに答えます。* はログインのいらない公開データだけに使いましょう。

よくある間違い

ルートや認証ミドルウェアの後にCORSを追加する。 プリフライトの OPTIONS リクエストには Authorization ヘッダーが付かないので、先に置かれた認証チェックが 401 で答え、ブラウザはCORSエラーを報告します。CORSのミドルウェアは最初に登録しましょう。

Cookie付きで * を設定する。 ブラウザはそのレスポンスを拒否します。代わりに特定のオリジンをそのまま返しましょう。

フロントエンドでCORSを直そうとする。 mode: 'no-cors' のようなリクエストのオプションは制限を外してくれません。読めない不透明なレスポンスが返るだけです。直せるのはサーバーのヘッダーだけです。

app.use() とミドルウェアの順番の仕組みについては、Expressのミドルウェアを参照してください。