1

I've spent hours messing around with this... and I don't understand why I'm getting an undefined response when I use Javascript to make a request. My flask app is extremely basic and looks like the following:

@app.route('/timespent', methods=['GET', 'POST'])
def calculateAvgReadTime():
    return jsonify({'result':'Success'})

The Javascript code I'm using to make a request to this endpoint is the following:

var xhr = new XMLHttpRequest();

// Setup our listener to process compeleted requests
xhr.onreadystatechange = function () {
    console.log(xhr.status)

    // Only run if the request is complete
    if (xhr.readyState !== 4) return;

    // Process our return data
    if (xhr.status >= 200 && xhr.status < 300) {

        // What do when the request is successful
        console.log(JSON.parse(xhr.responseText));
    }
};

xhr.open('GET', 'https://xxxxx.herokuapp.com/timespent');
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();

What's confusing is the following:

  1. if I use Python or software like Insomnia, then the request is returned as expected and nothing is wrong - this is what makes me think something is wrong with the Javascript...

  2. When I change the URL in the Javascript to "https://jsonplaceholder.typicode.com/todos/1", it works as expected and returns a json - this is what makes me think that my flask app is wrong...

Some help would be greatly appreciated.

Hazzamataza
  • 983
  • 2
  • 12
  • 25
  • See this other answer: https://stackoverflow.com/questions/1973140/parsing-json-from-xmlhttprequest-responsejson ... especially the suggestion to use Fetch API (with the polyfill if you need to support old browsers) instead of XMLHttpRequest. XMLHttpRequest is old and does silly unexpected things by default (you need to know what and how to set properly). – BareNakedCoder Dec 26 '18 at 05:05
  • Thanks for your response! I actually tried this with the Fetch Api and had the same problem. I went for the “Classic” mode because there’s a few more controls, so I thought it would be easier to debug. – Hazzamataza Dec 26 '18 at 09:07
  • Wild guess: remove `xhr.setRequestHeader("Content-Type", "application/json");`. Your *request* does not have a JSON body. The response will have a JSON body but it's up to the server to add that header *to the response* (which flask's jsonify will do for you). – BareNakedCoder Dec 26 '18 at 19:40
  • Thanks again... unfortunately I added that line after in the hopes that it would make it work. Removing it has the same effect. It’s strange that it’s only Javascript that returns 0/undefined... damn Javascript!!! – Hazzamataza Dec 26 '18 at 22:33
  • This is a puzzler. What exactly do you see in the console if you do `console.log(xhr.responseText);` instead? – BareNakedCoder Dec 26 '18 at 22:51
  • Apparently, it's linked to CORS blocking... I'm now seeing this error "Access to XMLHttpRequest at 'https://xxxx.herokuapp.com/timespent' from origin 'https://jsonplaceholder.typicode.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." – Hazzamataza Dec 27 '18 at 10:47
  • I got it working :) thanks for bearing with me! Much appreciated – Hazzamataza Dec 27 '18 at 10:57
  • How did u got it working? This will help others that are facing the same issue. Regards – Olumide Ayeni May 18 '20 at 09:08

0 Answers0