AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

FlaskのAjax通信でつまずいた話

Pocket

Pocket

こんにちは2018年度新卒の清水です!
新人研修でHTML, CSS, JavaScriptを使いwebアプリを作っています。
私はフロントをあまり書いてこなかったので心機一転して学習しています。
ちなみに、学生のときサーバサイドをやってました(JavaとPythonはよく書いてました)。

やりたいこと

  • ブラウザをリフレッシュしてもデータが残るようにしたい
  • ローカルストレージはデータ構造が複雑になりそうなのでRDBでやりたい
  • サーバサイドを書きたい(できればPython)

 

方針

  • Ajax通信を使いロード時にデータを取得
  • RDBはMySQLを使用 理由:以前よく使っていた、SQL書きたい
  • サーバサイドはPythonのflaskを使用 理由:APIを作ったことがある

 

コード

Python

バージョンは3.6.5です
flaskをインストールします

MySQLからデータを取得するところは省きます

とりあえず curlコマンドでjsonが取得できるかテストします

ちゃんと取れました

HTML JavaScript

HTML

JavaScript

ボタンが押されたらajax通信をしてjsonを取得します
見た目はこのように

いざ実行

Chromeのデベロッパーツールを使用してテストを見ていきます
おや?エラーを吐きました

翻訳すると

なんだかよくわかりませんね

Access-Control-Allow-Origin + flask でググっていると以下のサイトを見つけました
Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource

どうやらPython3系以降は pip install flask-corsでflask-corsを使用して解決するそうです。
私はpip3 install flask-corsで入れました。

いざ実行(二度目)

解決していない…なぜだ

前記したサイトにはPython2系の解決法も記載されていたのでこちらもテスト

いざ実行(三度目の正直)

ついに成功!
なぜPython2系の解決法で成功したのかは不明

結局何が問題だったの?

  • Access-Control-Allow-Originがサーバ側で許可されないないのが問題だった
  • Access-Control-Allow-Origin', '*'を設定することにより、任意のドメインがサイト間でアクセスできるようになる

だんだん調べて行くとSame-Origin Policy(同一生成元ポリシー)やCORS(Cross-Origin Resource Sharing)制限などのネットワーク用語が出てきたので理解できるよう努力していきたいと思っています。

Pocket