We Keep Coding

Javascript request results in undefined when using Flask

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

Getting too much traffic error in javascript for xmlhttprequest

I am using xmlhttprequest() in javascript to find the statuscode for the link.
xhttp = new XMLHttpRequest();
xhttp.timeout = 5000;
xhttp.open("GET", url, true);
xhttp.send(null);
I am writing this code in a function and calling this function in a for loop for almost 1000 links.If i execute this once it is getting executed and then if i launch chrome and trying to run anurl it is showing error like "Too much traffic from the server" and asking for verification.
I have done same in Java but in java(Using httprequest) i am not getting any error.
One more issue i am facing is i am getting status code as '0'.What does it mean ??
The speed of execution is also very slow.Is there any way to find the status code of an url faster using javascript???

This code is working fine for xmlhttprequest :
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();

javascript XMLHttpRequest returning status of 0 [duplicate]

This question already has answers here:
Ways to circumvent the same-origin policy
(8 answers)
Closed 6 years ago.
I am trying to call a REST API with JavaScript and XMLHttpRequest.
The URL is: "http://quotes.stormconsultancy.co.uk/random.json"
This works from the browser window, but when I try to run it as javascript in the browser, it always returns a status of 0
(Even when I substitute the URL with any another URL for a simple GET request - for e.g. http://www.yahoo.com, I still get the same result.
Here is the code:
(function callRestAPI() {
var request = new XMLHttpRequest();
var url = "http://quotes.stormconsultancy.co.uk/random.json";
request.onreadystatechange = function () {
if (request.readyState === XMLHttpRequest.DONE) {
if (request.status === 200) {
alert("The response was: " + request.responseText);
} else if (request.status === 0) {
alert("The response was a status code of 0");
}
}
};
request.open("GET", url, "false");
request.send();
})();
I am at a loss on how to figure this out. Any help would be appreciated.
Thanks,
Jay
(Note: I get the same result with Firefox 47 and Chrome 51

Isn't this a Cross-Origin Request issue? Since you're calling the URL in ajax from another domain it gets blocked, thats why when you're doing it from the browser window it works (same domain) but from where you're hosting your script it doesn't?

Cross-Origin Request, the Server has to provide some whitelist to let you do what you want, read here:
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

How to suppress SSL error when AJAX request to the server with invalid certificate

I have this code:
function newXMLHttpRequest() {
var xmlHttp;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (f) {
xmlHttp = new XMLHttpRequest();
}
}
return xmlHttp;
}
var xmlHttp = newXMLHttpRequest();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = function() {
// this I have xmlHttp.status = 12019
alert("readyState = " + xmlHttp.readyState + "\nstatus = " + xmlHttp.status);
}
xmlHttp.send('same data');
When I send request to the server with invalid certificate I have error with status code 12019.
Solution should be cross-browser (IE, FF, Chrome)

First, to answer the question in the title, this cannot be done. The client xmlHttp libraries do not allow the client to ignore ssl errors. The MsXml2.ServerXMLHTTP object does allow one to ignore SSL errors with the setOption(2, 13056) method. However, this object cannot be used within a browser, nor is it cross-platform.
That said, there seems to be another issue. The 12019 status does not indicate an invalid certification. Some variant of an HTTP 403 status code, or one of the many 'invalid certification' codes would be expected in that case.
Your 12019 status code indicates:
ERROR_INTERNET_INCORRECT_HANDLE_STATE
12019
The requested operation cannot be carried out because the handle supplied is not in the correct state.
Unfortunately this status code doesn't really communicate much, and without knowing what versions of IE, and details about the server there's not much more to go on. I've checked a number of forum posts. One stated switching to IIS fixed the issue, another stated that temporary files that could not be overwritten lead to the problem. Most posts however, do not have a satisfactory, or decisive conclusion.

xmlhttp request has strange behavior and has status = 0

I have a Google Chrome extension that upon pressing a button executes an xmlhttp request to a server. I'm currently handling the error if the server is down. What I want to achieve is to retry the request after an increasing number of seconds. That's how I do it:
var execute = function(method, url, i){
//if timeout doesn't exist, create one
if(!i){
i = 1000;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(method, url, true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.status != 200) {
// Handle error, retry request
console.log("xmlhttp.status = " + xmlhttp.status + " and xmlhttp.readyState = " + xmlhttp.readyState);
setTimeout("execute('"+method+"', '"+url+"', "+i*2+")", i);
return;
}
};
xmlhttp.send(null);
}
Basically if there is some kind of problem I retry again the request. If the server is up, there is no problem at all, but if the server is down JavaScript throws me an error saying:
PUT http://localhost:3000/buy/2/id=1329664820124
executepopup.html:127
(anonymous function)
Which is not really meaningful, but however. The status in the log says "0", which is pretty lame too. If I turn on the server again while this is going on, it should stop doing this, but instead also if it succeeds (I see a log in the server that tells me that it received the request), it keeps calling the execute method. I don't know how to stop this recursion if the server turns on. Am I doing something wrong? Is this state equal zero the problem?
Thanks a lot

Solving the problem
onreadystatechange is triggered for every state change, from state 0 to 4, and many times between. You should only be interested in readyState 4, because the request has fully finished at that point.
To get your method to work, check whether xmlhttp.readyState == 4:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status != 200) {
Fixing your horrible implementation of setTimeout
setTimeout("execute('"+method+"', '"+url+"', "+i*2+")", i); is not the right way to call a function again. Since you're developing in a Chrome extension, you can use the following format for setTimeout:
setTimeout(execute, i, method, url, i*2);
// Calls execute(method, url, i*2) after i milliseconds.