CORSエラーをnginxのリバースプロキシで回避する(のはあまり良くない)
CORSのエラーでつまづく
CORSのエラーってAPIベースで開発してると、よく遭遇するので色々と試した時のメモです。
昔はGrafanaのプラグイン作りたいなーと色々試している時に初めてCORSエラーにつまづき、今回は会社の若手が作ってくれたAPIサーバでフロント作ってみようとして試してみたらつまづきました。
要は信頼されているオリジン以外からのリクエストは受け付けない（CSRF対策）として必要なセキュリティ機構なのですが、APIサーバ側で設定が必要なので、フロント開発してると、ちょっとと試したいなーって時に困ること多い気がします。
CORSを回避する方法
no-corsを指定する
これはフロントエンド側でno-corsを指定して、一部CORSを回避することもできそうですが、対応できる内容が限定的なようです。
nginxでプロキシを設定する
試しにnginxでリバースプロキシ作ってみたので、https://httpbin.org へリクエストしてみて、ヘッダみたらCORS検証に必要なヘッダは返してくれていました。
1 | access-control-allow-origin: * |
cors-anywhereというのもあったらしい
このCORSの課題を解決する方法としてcors-anywhereというOSSもあったようですが、
下記のIssueに記載の通り
Github - Rob–W/cors-anywhere/issues/301
デモ環境が悪用されたり、色々とセキュリティ上の課題があって、今はリポジトリ自体も更新が止まっているようでした。
このIssuesでもプロキシじゃなくてサイト側でCORSサポートするのが推奨と書かれていますね。
If possible, try to avoid the need for a proxy at all. CORS Anywhere works by combining proxy functionality with CORS. You may not need proxy functionality, if the web service that you are trying to access already supports CORS. This is the preferred solution because it is faster and more reliable.
まとめ
CORSのエラーは、フロントエンド開発で色々と試したいなーって時に困ること多い気がします。
そんな時に、開発用途に限定して、リバースプロキシを作ってみるのはありですが、基本は開発においてもきちんとサイト側で対応しようねということなんだと思います。