Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@kaishuu0123

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

概要

スクリーンショット 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 を設定したり、動作するポート番号を変更したりできます。
docker pull kaishuu0123/cors-reverse-proxy

docker run -it -d \
  -e CORS_REVERSE_PROXY_TARGET_URL=http://example.com \
  -e CORS_REVERSE_PROXY_HOST=0.0.0.0 \
  -p 8181:8081 \
  --name cors-reverse-proxy \
  kaishuu0123/cors-reverse-proxy
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 の哲学っぽくていいなぁと思いました °˖✧◝(⁰▿⁰)◜✧˖

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kaishuu0123
何をやる人なんだか一言で言いにくいので、結局「システムエンジニア」を名乗っています。(プログラミング/ネットワーク/インフラ etc ...)バックエンド寄りです。
weseek
WESEEK, Inc. はシステム開発のプロフェッショナル集団です。UIデザインからサービス運用のためのネットワーク・インフラ構築まで全てを自社で行います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?