ReactやAjaxなどブラウザから非同期でサーバにデータを要求した場合、「No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ is therefore not allowed access.」というエラーが発生することがあります。
これは、クライアントが意図しないサーバへ通信しようとすることを防ぐブラウザのセキュリティ機能です。これを回避するためには、下の図に示すように、アクセスされるサーバ（サーバB）側で明示的にアクセスするサーバ（サーバA）のクライアントからのアクセスを許可する記述が必要になります。
Expressサーバの場合、この設定はcorsと呼ばれるパッケージを利用することで、容易に実現できます。ここでは、開発用にサーバAがどこに設置されていてもサーバBでアクセスを許可する方法、特定のサーバAからのみサーバBでアクセスを許可する方法の2つの方法について説明します。
目次
共通の手順
ここでは、どちらの方法を選択するにしても必要となる作業について説明します。ただ、必要な作業は次のコマンドでcorsをインストールするだけです。
# npm i --save cors
任意のサーバAからのアクセス許可
次に任意のサーバAからアクセスを許可する方法を説明します。この場合、サーバBのapp.jsに次の2行を追加します。
var cors = require('cors');
app.use(cors());
追加する場所は、var app = express(); の次の行です。ここで作成したサーバはここにアップロードしてあります。
特定のサーバAからのアクセス許可
次に特定のサーバAからのアクセスを許可する方法を説明します。ここでは、サーバAのURLをhttp://localhost:3000 とします。また、アクセスされるサーバBでアクセスを許可するURLを HTTP GET ‘/api/sample’とします。
この場合、HTTP GET ‘/api/sample’を呼ばれた時に実行される関数のあるファイルを変更します。私の場合は、前回、routes/index.jsにこの処理を記述したのでroutes/index.jsを次のように変更します。
var express = require('express');
var router = express.Router();
// 新たに追加
var cors = require('cors');
var corsOptions = {
origin: 'http://localhost:3000',
optionsSuccessStatus: 200,
};
// corsの処理を追加
router.get('/api/sample', cors(corsOptions), function(req, res, next) {
res.json('success');
});
module.exports = router;
これで指定したURLからはアクセスできること、指定したURL以外からはアクセスできないことが確認できると思います。
ここで作成したサーバはここにアップロードしてあります。
