ExpressでAPIサーバーを構築する際に、以下のようなCORSのエラーに遭遇することはよくあるのではないでしょうか。

Access to XMLHttpRequest at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

この記事では、ミドルウェアを使ってCORSを許可する方法を見てきましょう。

1. npmでcorsパッケージをインストールする

始めにnpmを利用してcorsパッケージをインストールします。

コマンドを実行します。

npm install cors

次のようなコメントとともに、corsパッケージがインストールされます。

+ cors@2.8.5
added 1 package from 1 contributor and audited 51 packages in 1.312s

2. Expressでcorsミドルウェアを使用する

Expressでcorsミドルウェアを読み込みます。

const cors = require('cors');

全てのオリジンを許可する

すべてのオリジンを許可する場合は、以下のようにapp.use(cors()) と記述します。

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

app.use(cors()); // 全てのオリジンを許可

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

特定のオリジンのみを許可する

すべてのオリジンを許可してしまうのは、セキュリティ的にリスクが高いので、特定のオリジンのみを許可します。

app.use(cors({
  origin: 'http://example.com' // 特定のオリジンを許可
}));

複数のオリジンを許可する

複数のオリジンからデータを取得する場合は、originオプションに配列で指定します。

app.use(cors({
  origin: ['https://example1.com', 'https://example2.com']
}));

その他のCORSオプション

メソッド、ヘッダーなどのオプションも指定できます。

app.use(cors({
  origin: 'https://example.com',
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // 許可するHTTPメソッド
  allowedHeaders: 'Content-Type,Authorization' // 許可するヘッダー
}));