5年目
はじめに
この記事はKogakuin Univ Advent Calendar 2019 - Adventar1日目です。
はじめまして、yudegakiと申します。
今年はなぜかAdvent Calendarが錬成されなかったので、いい伝統は引き継ぐべく(許可はもらってませんが)急遽作成することにしました。(現在11/30 21:45... やべぇよ)
また、Advent Calendarで記事を書いてくださる方を募集しています。どんな記事でも大丈夫ですので、登録して頂けると幸いです。
今回はCORSの回避手法についての記事を書いていこうと思います。
CORS(Cross-Origin Resource Sharing)とは
ブラウザがオリジン(HTMLをGETしてきたサーバ)以外のサーバーからデータを取得する、クロスドメイン(Cross-Domain)問題を制限するブラウザの制約のことです。この問題を回避する手法としてJSONP(JavaScriptでHTMLにscriptタグを追加する手法)とサーバー側からのレスポンスヘッダにAccess-Control-Allow-Originを追加する手法があります。
WEBプログラミングの授業で、「JSONPはやめたほうが...(意訳)」と言われたので今回は後者の手法について話を進めて行きます。
目標
localhostに建てた鯖から、外部鯖を通してAPIから200のレスポンスを受け取る。
手法
HerokuにFlaskを使って鯖を建て、鯖からAPIにリクエストを送り、レスポンスに'Access-Control-Allow-Origin'を追加したデータをlocalhostの鯖に返す。
コード
gistdf7c844229c70add6df137f86f0e2c08
はい、このままで動きます。
テスト
ではテストをしていきます。
今回はSimpleAPI vol.2 - 最寄り駅Webサービス & 最寄り駅モバイル地図のAPIを使っていきます。
まずはlocal鯖から直接GETしてみます。
あらら、、、怒られてしまいましたね。
では、先程作成したサーバーを踏み台にしてアクセスしてみましょう！
正常にレスポンスが帰ってきました！
これを使ったサービス例
https://yudegaki.github.io/Optical-character-recognition/
これはGASを使って実装した、画像を送るとOCRした結果を返すというAPIを利用して実装しました。(この場合には、踏み台サーバーは今回省略したPOSTの処理を行っており、POSTで踏み台サーバーにbase64形式の画像を送り、踏み台サーバーが代わりにPOSTを行い、レスポンスに先述のヘッダを付けて返すという処理を行っています。)
GASで建てたサーバーはCORSに引っかかってしまうため、この回避が必要となります。
あとこのサイト、デザインがひどいので改善策を募集しています。バシバシDM OR リプください。
おわりに
アドベントカレンダーが始まって5年目だそうで...
今年は色々あり急なスタートとなってしまったため、枠がたくさん空いてます...
どなたか記事を書いてくださると助かります！ 助けてください...（泣）
明日はKogCoderの期待の星metarinくんの記事です！
PCの前で全裸待機しましょう！！
またすぐにお会いすることになりそうですが、温かい目で見てもらえると幸いです。
