Simple Fetch GET Request In Javascript To A Flask Server

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 { : 're

Solution 1:

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)
    })
}

Solution 2:

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

Solution 3:

fetch() returns a promise, if you want to use .json() it returns another promise. You cound use .then() to get the json response.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())  
  .then(json => console.log(json))
  

But you have another error probably related to cors in your flask server, try this before the return:

response.headers.add('Access-Control-Allow-Origin', '*')