Webアプリを作る際によく起こる問題
CORSのクロスドメイン制約
今回はこれを簡単に無料で24時間、回避する方法を紹介します
CORSとは
CORS(Cross-Origin Resource Sharing)とは、ブラウザがオリジン以外のサーバからデータを取得すること。ほとんどのブラウザには、クロスドメイン通信を拒否するようになっている
CORSはセキュリティ上の問題があるため実装されている
詳しくはこちら
クロスドメイン制約回避
自分が管理しているサーバーに対して、リクエストを送信する場合はサーバーのほうでCORSの設定すればを問題を回避することができる
しかし、外部APIの場合は当たり前だが設定を変更できない
そのため、クロスドメイン制約に引っかからないような対策を打つ必要がある
クロスドメイン制約の回避方法
代表的な回避手段として、webサーバーを用意し、そのサーバーを経由してリクエストを投げる方法がある
しかし、サーバーをどこに置くのか、誰かに悪用されないかなどを考える必要があるため困難な場合がある
そこでGlitchと呼ばれるサービスを用いることで解決できるのではないかと考えた
Glitchとは
Glitchとは、簡単にNode.jsを利用したWebアプリを開発・公開できるWebサービス
Node.js限定だが無料で24時間、Webサービスを公開できる
また、GitHubへのインポートやエクスポートもできる
paasぽいもの？
Glitchの制約
Glitchにはいくつかの制約がある
重要なものを抜粋すると
- 匿名ユーザーによって作成されたプロジェクトは、5日で期限切れ
- 使用されていない場合は5分でスリープ、12時で停止
- 1時間で4000リクエストが上限
などなどの制約がある
詳しくはこちら
ちなみにスリープの場合は5秒、停止の場合は25秒ほど復帰に時間がかかる
作ったもの
Glitch
https://midoribin-cors.glitch.me/cors?url={URL}
ソースコード
https://github.com/MIDORIBIN/cors
{URL}の部分にリクエストを投げたいurlに書き換えてリクエストを投げるだけ！
これだけでクロスドメイン制約を回避できる
一応サンプル
https://midoribin-cors.glitch.me/cors?url=https://www.google.co.jp/
あとがき
この記事を読んで今回のを作った
トレンドにこの記事が乗っていたので読んだ
しかし、この記事よく見ると2017年11月に更新、かなり前のものだった
トレンドのほとんどはごく最近に書かれたものがほとんどなのでこんなこともあるのかと思った