Flask で Access to fetch at ... from origin ... has been blocked by CORS policy

対応

after_request を使って、レスポンスを フック して、ヘッダを書き換えました。

#
# 対話モード >>> に
# コピペで実行できます。
#
from flask import Flask, jsonify


app = Flask(__name__)

@app.route('/')
def index():
    return jsonify({'message': 'Hello, world!'})

@app.after_request
def set_cors_header(response):
    クライアント側のアドレスとポート = 'http://127.0.0.1:8080'
    response.headers['Access-Control-Allow-Origin'] = クライアント側のアドレスとポート
    response.headers['Access-Control-Allow-Method'] = 'GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS'  # noqa: E501
    response.headers['Access-Control-Allow-Headers'] = 'Content-type,Accept,X-Custom-Header'  # noqa: E501
    response.headers['Access-Control-Allow-Credentials'] = 'true'
    response.headers['Access-Control-Max-Age'] = '86400'
    return response

app.run()

• Handling GET and POST in same Flask view - Stackoverflow

背景

CORS に引っかかると以下のようなエラーが表示されます。

Access to fetch
at 'http://127.0.0.1:5000/'  サーバ (Flask) 側の IP アドレスとポート
from origin 'http://127.0.0.1:8080' クライアント側の IP アドレスとポート番号
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present
on the requested resource.
If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

いくつか他にも対応方法はあるようなのですが、

• Flask-CORS

そこまで込み入ったことはしないので、とりあえず、簡単に逃しました。