Next.jsで外部のAPIに対して非同期でリクエストをしたところCORSエラーが発生した。

異なるオリジン間での通信を許可するにはサーバ側にリソース共有を許可する設定を導入する手法が一般的だが、今回はクライアント側だけで対応してみた。

そこで、http-proxy-middlewareというモジュールを使ってHTTPリクエストをプロキシすることでエラー回避をしてみた。

環境

• http-proxy-middleware 1.0.6
• Next.js 10.0.3
• Express 4.17.1

導入

$ yarn add http-proxy-middleware

http-proxy-middlewareはミドルウェアとして提供されているので、他のフレームワークと組み合わせる必要がある。
今回はExpressのミドルウェア関数として導入してみた。

server.jsconst express = require('express');
const next = require('next');
const {createProxyMiddleware} = require('http-proxy-middleware');

const dev = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 3000;

const app = next({ dev });
const handler = app.getRequestHandler();
const server = express();

app.prepare()
    .then(() => {
        server.use(['/api'], createProxyMiddleware({
                target: "http://localhost:3001", // プロキシ対象のホスト
                changeOrigin: true,
            })
        )

        server.all('*', (req, res) => {
            return handler(req, res)
        });

        server.listen(port, () => {
            console.debug(`> Runnning on http://localhost:${port}`)
        })
    })
    .catch(() => {
        console.error()
        process.exit(1)
    })

上記のプロキシの設定は、APIを提供しているサーバをlocalhostの3001番ポートで起動した場合を想定している。

APIのサーバでは、http:localhost:3001/api/hogeのエンドポイントでAPIを提供する。

http-proxy-middlewareを導入したことでhttp:localhost:3000/api/hogeにリクエストすると、APIサーバへとプロキシされる。

$ curl localhost:3000/api/hoge
{
    success: true,
    body: {},
}