memo next

Next.js で API リクエスト を proxy する

Keita Imatomi
2021-8-21 14:24

Next.js で Proxy をかますのに、ちょうど Next.js 内で収まる Next Http Proxy Middleware というのを見かけたので使ってみました。

Proxy

corsだったり、フロントには持たせたくない情報があったりで、フロントから直接サービスAPIをたたけない場合に、一度サーバーを経由してサービスAPIにアクセスする。

今回は、

  • Next.js フロントから Next.js サーバー(Proxy)にAPIリクエスト
  • Proxy からサービスAPIにリクエスト

にする。

インストール

next-http-proxy-middlewareをインストール

$ npm install next-http-proxy-middleware

スクリプト

pages/api/proxy/以下に[...all].tsファイルを作成する。

pages/api/proxy/[...all].ts

import { NextApiRequest, NextApiResponse } from "next"; import httpProxyMiddleware from 'next-http-proxy-middleware' import https from 'https' // ファイルのアップロードなどでmultipart/form-dataを使用するときの設定 export const config = { api: { bodyParser: false }, } // eslint-disable-next-line @typescript-eslint/no-explicit-any export default (req: NextApiRequest, res: NextApiResponse): Promise<any> => { const proxy = httpProxyMiddleware(req, res, { target: process.env.API_HOST, changeOrigin: true, headers: { 'x-api-key': process.env.API_KEY }, pathRewrite: { '^/api/proxy': '', }, agent:new https.Agent({ rejectUnauthorized: false }) }) // return しないと "API resolved without sending a response~"といわれるので return proxy }

これで、Next.js サーバーの /api/proxy/ 以下への全リクエストがプロキシされ、サービスAPIへリクエストされる。

こちらもどうぞ