はじめに

この記事は、リンクアンドモチベーションアドベントカレンダー2024の記事です。

Web開発をしていると、サードパーティAPIにアクセスする際、CORSエラーに悩まされることがありませんか？この記事では、Node.jsを使って簡単なプロキシサーバーを構築し、この問題を解決する方法を解説します。

プロキシサーバーとは？

プロキシサーバーは、クライアント（ブラウザなど）とリソース（APIサーバーなど）の間に立ち、リクエストやレスポンスを仲介するサーバーです。

利用例

CORSの回避: 異なるドメイン間でのリクエスト制限を解消
リクエストカスタマイズ: 認証ヘッダーの追加やURLの変更
セキュリティの向上: APIキーやトークンをクライアントから隠す

プロジェクトの準備

まず、プロジェクトのフォルダを作成してNode.jsの環境を整えます。

mkdir instant-proxy && cd instant-proxy
npm init -y
npm install express http-proxy-middleware dotenv

プロキシサーバーの実装

以下のコードを index.js に記述してください。

const express = require('express');
const app = express();
const { createProxyMiddleware } = require('http-proxy-middleware');

app.get('/', (req, res) => {
  res.send("This is a test");
});

// プロキシ設定
app.use('/proxy', (req, res, next) => {
  createProxyMiddleware({
    target: 'https://official-joke-api.appspot.com/random_ten', // 転送先のURL
    changeOrigin: true, // リクエストのオリジンをターゲットに変更
    pathRewrite: {
        [`^/proxy`]: '', // URLの書き換え
    }
  })(req, res, next);
});

// 3000の部分は任意のポートに書き換えてください
const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

module.exports = app;

今回はプロキシ先としてofficial-joke-apiというでランダムにジョークを返すAPIを利用します。
試しにpostmanなどでリクエストすると以下のようなレスポンスが得られます。

プロキシを利用することで以下のようなイメージでリクエストされます。

ローカルのサーバーを起動し、http://localhost:3000/proxyに対してリクエストしてみます。

無事に転送先のレスポンスが取得できていることがわかります。

パプリックな環境にデプロイ

今回はvercelにデプロイしてvercel上でプロキシさせてみます。

設定ファイルの作成

プロジェクトのルートディレクトリにvercel.jsonを作成します。

{
    "headers": [
        {
            "source": "/(.*)",
            "headers": [
                {
                    "key": "Access-Control-Allow-Origin",
                    "value": "*"
                },
                {
                    "key": "Access-Control-Allow-Credentials",
                    "value": "false"
                },
                {
                    "key": "Access-Control-Allow-Methods",
                    "value": "GET, POST, PUT, DELETE, OPTIONS"
                },
                {
                    "key": "Access-Control-Allow-Headers",
                    "value": "Content-Type, Authorization"
                }
            ]
        }
    ],
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/"
        }
    ],
    "builds": [
        {
            "src": "index.js",
            "use": "@vercel/node"
        }
    ]
}

リポジトリの作成

githubに作成したinstant-proxyのリポジトリを作成してファイルをpushしてください。

vercelの設定

vercelにアクセスしてログインします。
（アカウントがない場合はvercelのヘルプに従ってアカウントを作成してください。）

OverviewのSearch Repository and Projectsに作成したリポジトリ名instant-proxyを検索してImportをクリックし、Configure ProjectでDeployをクリックしてください。

作成されたプロジェクトのVisitをクリックするとデプロイしたページにリダイレクトされます。

無事にデプロイされていることが確認できます。

動作確認

デプロイしたプロキシサーバーをローカルのpostmanから使用してみます。
デプロイされたURLにパス/proxyを加えてGetリクエストします。

ローカルで検証したように転送先のAPIの結果が取得できています🎉

おわりに

今回は本当に簡素ななんちゃってプロキシでしたが、カスタマイズしていけばテストやCORSの回避など色々と便利な場面がありそうです。
数行で実装できるので、興味ある方は色々と遊んでみてください👍

参考