CODEWITHSUNDEEP
javascriptpythonflaskfetch-api
TheSmartMonkey
TheSmartMonkey

Reputation: 1052

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 { <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.

Upvotes: 9

Views: 24129

Answers (3)

TheSmartMonkey
TheSmartMonkey

Reputation: 1052

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

Upvotes: 14

Emeeus
Emeeus

Reputation: 5250

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', '*')

Upvotes: 4

stasiekz
stasiekz

Reputation: 1863

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

Upvotes: 7

Related Questions