フロント側でCORSを回避するためにリバースプロキシサーバーを作る

category
date
Jan 15, 2023
slug
how-to-avoid-cors
status
Published
summary
フロント側でCORSを回避するためにリバースプロキシサーバーを作る
type
Post
updated: 業務でサーバー側がCORS対応するまでの間、開発環境でCORS回避をするというケースがあったので、対処法を色々調べてみたメモ。
Chrome拡張機能で回避する方法と、nodeでリバースプロキシのサーバーを立てるという方法がありました。

オプション1: Chrome拡張を利用する

CORS Unblock
No more CORS error by appending 'Access-Control-Allow-Origin: *' header to local and remote web requests when enabled
CORS Unblock
https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino?hl=ja
CORS Unblock
こちらのChrome拡張機能を利用すると、CORSを回避することができます。インストールしてアイコンをクリックするだけで動作します。
メニューのTest CORSから回避が動作しているかどうかを確認できます。

オプション2: nodeでリバースプロキシサーバーを立てる

 

プロジェクトの作成

mkdir reverse-proxy
npm init
npm install express axios dotenv cors --save
touch app.js

app.js

const express = require('express')
const app = express()
const axios = require('axios')
const cors = require('cors')

class AxiosParamsObject {
    constructor() {
        this.params = {}
    }
    setApiKey(key, value) {
        if (!!key && !!value) {
            this.addParam(key, value)
        }
    }

    addParam(field, value) {
        this.params[field] = value
    }

    addParamsFromRequest(req) {
        for (const [field, value] of Object.entries(req.query)) {
            this.addParam(field, value);
        }
    }

    getParams() {
        return this.params
    }
}

app.use(cors({
    origin: '*'
}))

require('dotenv').config()

app.get(':endpoint([\\/\\w\\.-]*)', function (req, res) {
    // Remove any trailing slash from base url
    const endpoint = (process.env.API_BASE_URL).replace(/\/$/, "") + req.params.endpoint

    const paramsObj = new AxiosParamsObject()
    paramsObj.setApiKey(process.env.API_KEY_PARAM_NAME, process.env.API_KEY)
    paramsObj.addParamsFromRequest(req)

    axios.get(endpoint, {
        params: paramsObj.getParams(req)
    }).then(response => {
        res.json(response.data)
    }).catch(error => {
        res.json(error)
    })
})


app.listen(3002)
 

.env

API_BASE_URL=対象のサービスのbase url
API_KEY=APIキー（必要な場合）
API_KEY_PARAM_NAME=key
 

実行方法

node app.js
open http://localhost:3002/path/to/endpoint # エンドポイントのパス
 

© Titch 2022 - 2025