Express サーバで CORS を許可する・PUT や DELETE メソッドの通信を許可する
Express で作った Web API サーバに対し、SPA なアプリから GET 通信を試みたら、以下のようなエラーがブラウザコンソールに出てしまった。
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
異なるドメインへの Ajax 通信を制限する、クロスドメイン制約に引っかかっているようだ。
- 参考：【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita
- 参考：CORS(Cross-Origin Resource Sharing)について整理してみた ｜ Developers.IO
コレを解消するには、Express サーバの起動時に以下のように CORS を許可するヘッダを設定してやれば良い。
const express = require('express');
// サーバをインスタンス化する
const app = express();
// CORS を許可する
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
// サーバを起動する
app.listen(port);
GET・POST メソッドの通信についてはコレで上手く行っていたのだが、PUT や DELETE メソッドでの通信時に、次のようなエラーが出た。
Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
調べてみると、CORS を許可するメソッドを別途指定しないと、PUT や DELETE に対応してくれないようだ。
先程のコードの // CORS を許可する 部分に、以下の1行を追加すると解決した。
// CORS を許可する
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // ← コレを追加
next();
});
- 参考：amazon web services - Method PUT is not allowed by Access-Control-Allow-Methods in preflight response, from AWS API Gateway - Stack Overflow
- 参考：ExpressでCORSを有効にする - Qiita
以前作った node-js-rest-api-sqlite-db にも反映しておいたので、SPA なアプリからアクセスして使ってもらえるであろう。