概要
Proxy
corsだったり、フロントには持たせたくない情報があったりで、フロントから直接サービスAPIをたたけない場合に、一度サーバーを経由してサービスAPIにアクセスする。
インストール
next-http-proxy-middlewareをインストール
$ npm install next-http-proxy-middleware
スクリプト
pages/api/proxy/以下に[...all].tsファイルを作成する。
pages/api/proxy/[...all].tsimport { NextApiRequest, NextApiResponse } from "next";
import httpProxyMiddleware from 'next-http-proxy-middleware'
import https from 'https'
export const config = {
api: {
bodyParser: false
},
}
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 proxy
}
これで、Next.js サーバーの /api/proxy/ 以下への全リクエストがプロキシされ、サービスAPIへリクエストされる。
API resolved without sending a response
別件で next-http-proxy-middlewareを使用した際、上記スクリプトのように return しているのにAPI resolved エラーが出る現象が発生した。APIからのレスポンスも来ており、問題はなさそうだったので、
にある通り、以下の config を追記することでエラー表示が出なくなった。
export const config = {
api: {
externalResolver: true,
},
}