Python(FLASK)からJavascriptへのJSONデータの受け渡しについて

サーバーサイドとフロントサイドでのJSONデータの受け渡しに困っております。

■構成

FLASK上でapp.pyを動かしており、app.pyから発行されるJSON形式のデータを
javascriptのFetchで受け取り、test.htmlに表示したいと考えております。

現状、以下の内容については確認できておりますが、
test.html経由でJSONファイルを取得することができません。

①app.pyを直接ブラウザで開くと、JSONデータが表示されることを確認しております。
②fetchのリンク先に外部のWEB API(JSON形式で応答)を指定した場合には、取得したJSONデータが
正しく表示されました。

思い当たる原因がございましたら、ご教示頂けないでしょうか。

■test.html

■test.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script>
    let url = "http://127.0.0.1:8888/";
    fetch(url)
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        document.body.textContent = JSON.stringify(json);
    });

    </script>
</head>
<body>
    <h1></h1>
</body>
</html>

■app.py

import os
import json
from flask import Flask, jsonify
 
app = Flask(__name__)

filepath = "./LockerKey.json"
filename = "LockerKey.json"

@app.route('/')
def info_json():
    if os.path.isfile(filepath):
        with open(filename, 'r')as f:
            json_data = json.load(f)
    else:
        print("ファイルが見つかりません。")
    return jsonify(json_data)

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=8888, debug=True)

■LockerKey.json

{"1": {"no": "1", "state": "available", "pass": "111111"}, "2": {"no": "2", "state": "available", "pass": "222222"}, "3": {"no": "3", "state": "available", "pass": "333333"}, "4": {"no": "4", "state": "available", "pass": "444444"}}

退会済みユーザー

2021/05/25 21:30 編集

おはようございます。問題文読ませていただきました。判断が難しいので、以下のことを試していただき、状況をご確認することは可能でしょうか？ 1. こちらの記事を熟読する。(https://www.sakurasaku-labo.jp/blogs/developer-tools) 2. test.htmlをChromeブラウザに貼り付ける。 3. デベロッパーツールを起動する。 4. networkタブへ移動する。 5. リロードして、fetchのレスポンスコード、結果内容などを報告いただく。ご確認のほど、よろしくお願いいたします。????‍♂️ 参考 https://www.sakurasaku-labo.jp/blogs/developer-tools

行動規範の内容に同意します

回答1件

実行したところ、Consoleに以下が表示されているのでCORSですね。(ポートは8888ではなく、5000に変更してあります。)

test.html:1 Access to fetch at 'http://127.0.0.1:5000/' from origin 'null' 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.

CORSの最も簡単な解決方法は同じ場所に置くことです。
以下の様なコードを使ってtest.htmlを表示すれば普通に動くと思います。(jsonファイルが見つかるの前提)

@app.route('/test')
def test():
    return render_template('test.html')

同じ場所におけない場合はCORSを許可するしかないです。
簡単な方法だと、flask_corsパッケージを導入し有効にする方法があります。
とりあえず以下で動きましたので参考まで。

pipは[-(ハイフン)」、fromは[_(アンダーバー)]

pip install flask-cors

app.py
1from flask import Flask, jsonify
2from flask_cors import CORS
3
4app = Flask(__name__)
5
6CORS(app)
7
8
9@app.route('/')
10def info_json():
11    json_data = {'test': 'data'}
12    return jsonify(json_data)
13
14
15if __name__ == "__main__":
16    app.run(host='127.0.0.1', port=8888, debug=True)