【Flask】React→Flaskにアクセスする際に発生したエラー【CORS】
前書き
React~Flaskアプリケーション「環境構築」編
melheaven.hatenadiary.jp
環境のおさらい
- React（TypeScript）ポート番号3000
- Flask（Python）ポート番号5000
シンプルにReact側で入力した入力タグ情報をFlask側へ送信するだけの記事です。
実装
React側
以下のコードは一部抜粋です。
const sendBack = (tags: string[]) => { Axios.post('http://0.0.0.0:5000/tags', { post_tags: tags }).then(function (res) { alert(res.data.result) }) }
Flask側
from flask import Flask, render_template, jsonify, request, make_response from flask_restful import Api, Resource from flask_cors import CORS app = Flask(__name__, static_folder="./build/static", template_folder="./build") app.config['JSON_AS_ASCII'] = False CORS(app) @app.route("/", methods=['GET']) def index(): return "Server OK" @app.route('/tags', methods=['GET', 'POST']) def parse(): data = request.get_json() text = data['post_tags'] print(text) response = {'result': text} return make_response(jsonify(response)) if __name__ == "__main__": app.debug = True app.run(host='0.0.0.0', port=5000)
エラー
なんかエラーが出た。Access-Control-Allow-Originが許可されてない的な。ハァ？
No 'Access-Control-Allow-Origin.Origin 'null' is therefore not allowed access.' header is present on the requested resource.
以下を追記するとうまく動きました。
CORS(app) ・・・↓ @app.after_request def after_request(response): response.headers.add('Access-Control-Allow-Origin', '*') response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization') response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS') return response ・・・↑ @app.route("/", methods=['GET']) def index(): return "Server OK"
どうやらCORSに問題があったようです。
CORSって何？？
CORSとは異なるオリジン(プロトコルやドメイン、ポート)で動作するアプリケーションにおいて、
別のオリジンに対してアクセスしたい場合にオリジン間HTTPリクエストによってアクセスを許可する仕組みです。
HTTPリクエストのヘッダーに「御宅のリソース使わしてくれ〜」と言う依頼を含めて送信します。
CORSではオリジン間リソース共有のアクセス制限をかけています。（Same-Origin Policy）
XSS (Cross Site Scripting)やCSRF (Cross-Site Request Forgeries)などの脆弱性を回避する目的にも活用されます。
ただ、不明なドメインからのリソース共有を許可してしまうと、致命的な脆弱性が発生するのは明白です。
そこでアクセス元の制限をかけるために、Access-Control-Allow-Originを追加します。
上記のプログラムでは、Access-Control-Allow-Origin：*としているので、「全て許可」モードです。
実用版のアプリケーションを開発する場合は、以下のようにドメインを指定してやる必要があります。
”Access-Control-Allow-Origin: https://foo.example”
