Menu
I'm trying to display some json data from a flask server to my html page but I have a TypeError: NetworkError when attempting to fetch resource. with a Promise { <state>: "rejected" }.
server.py
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/hello', methods=['GET'])
def hello():
jsonResp = {'jack': 4098, 'sape': 4139}
print(jsonify(jsonResp))
return jsonify(jsonResp)
if __name__ == '__main__':
app.run(host='localhost', port=8989)
script.js
function getHello() {
const url = 'http://localhost:8989/hello'
const response = fetch(url)
console.log(response);
document.getElementById("demo").innerHTML = response;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="getHello()">click</button>
<label id="demo"></label>
<script src="script.js"></script>
</body>
</html>
I also have a [object Promise] in the label section when I click on the button.
I did the simplest code possible but it doesn't work.
856
Thanks all for your good answers :) Here is my final code :
server.py
from flask import Flask, request, jsonify, after_this_request
app = Flask(__name__)
@app.route('/hello', methods=['GET'])
def hello():
@after_this_request
def add_header(response):
response.headers.add('Access-Control-Allow-Origin', '*')
return response
jsonResp = {'jack': 4098, 'sape': 4139}
print(jsonResp)
return jsonify(jsonResp)
if __name__ == '__main__':
app.run(host='localhost', port=8989)
script.js
function getHello() {
const url = 'http://localhost:8989/hello'
fetch(url)
.then(response => response.json())
.then(json => {
console.log(json);
document.getElementById("demo").innerHTML = JSON.stringify(json)
})
}
This could be caused by Same-Origin Policy. Browser does not allow making calls to different origin unless server sets special HTTP header.
If you are opening this html file from your browser, the origin of server which is localhost does not match with the origin in your browser which is probably a file path. You can make it work by adding Access-Control-Allow-Origin header to the response as follows:
from flask import after_this_request
@app.route('/hello', methods=['GET'])
def hello():
@after_this_request
def add_header(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
jsonResp = {'jack': 4098, 'sape': 4139}
print(jsonify(jsonResp))
return jsonify(jsonResp)
Now there is no network error but your promise is pending so you need to add then for it.
Alternatively you can serve index.html file by your Flask server so that origins match.
You can read more about CORS and SOP here:
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
