saino.me

都内でひっそりと生きる IT エンジニアの個人ブログです

Access-Control-Allow-Origin (CORS 関連) ヘッダーを付与するシンプルな Reverse Proxy (cors-reverse-proxy) を Go 言語で作りました

自分の Qiita からの引用です。

qiita.com

概要

スクリーンショット 2020-07-17 0.02.18.png

ユースケース

  1. ローカルの開発環境などに
  2. アプリケーションの連携をする際に、特定のアプリは信用して、リソース(画像や JS など)の読み込みを行いたいときに
    • 具体例がちょっと微妙かもしれませんが、「GROWI と draw.io を連携する際に、draw.io からの読み込みは信用したい」というケースがありました。 (PR はこちら)

作ったモチベーション

とにかくシンプルに「Access-Control-Allow-Origin: * ヘッダを付けるだけ」のコンテナがあってもいいんじゃないかな、と思ったからです。

それに加えて、ネットで探してみたところ、あまり自分の用途に適したリバプロが見つからなかったので、「自分好みにカスタムしていくのも Go の勉強がてら楽しいだろうな」と思ったからです。

「あー、アレのことか!」と思っていただくために、少し CORS policy に関するお話を書いておきます。

  • Web 開発をしているとよく CORS policy の問題?でコンテンツ読み込みが block されるときがあります。開発者コンソールで下記のようなメッセージを見たことがある方はいらっしゃると思います。
... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  • 非常に正しいですし、セキュリティ上必要な保護かもしれませんが、開発上「問題ない」と判断した上で block されたくない場合があります
  • 回避策として、2パターン程度考えられます
    1. nginx や Apache を間に挟み込んで、 Access-Control-Allow-Origin: * Header を付与するというケース
    2. アプリのミドルウェアに CORS 関連のパッケージを導入して設定を行う
  • 1. も現実的な案ですが、 container を利用した開発時に若干の手軽さに欠けます
    • もちろん、nginx や Apache などのコンフィグファイルを作成して、container 渡してあげる方法はありますが、そもそも Access-Control-Allow-Origin: * Header を付与するためだけにコンフィグファイルを用意するのは手間

という課題があって、作ることにしました。

使い方

  • 詳細は README.md に記載していますが、環境変数、コマンドライン引数で Reverse Proxy 先の URL を設定したり、動作するポート番号を変更したりできます。
CLI Option(Long) Shorthand Environment Variables Example Default
--target-url -t CORS_REVERSE_PROXY_TARGET_URL http://example.com/
--host -h CORS_REVERSE_PROXY_HOST 0.0.0.0 localhost
--port -p CORS_REVERSE_PROXY_PORT 8888 8081
--origin -o CORS_REVERSE_PROXY_ORIGIN http://example.com/ *

さいごに

Logging などはまだまだなので、今後も気づいたら引き続き開発をしていこうと思います。

こういった小さい実装をすることでコンテナ間の連携を手軽に変更できるのは UNIX の哲学っぽくていいなぁと思いました °˖✧◝(⁰▿⁰)◜✧˖