AngularJS $http.get() takes up to 10-20 seconds in Chrome, works fine in Firefox

All we need is an easy explanation of the problem, so here it is.

I’m encountering an odd error with AngularJS / Google Chrome. When I do an $http.get() it takes up to 18 seconds before it actually completes. It seems to keep at “PENDING” for the “OPTIONS” method:

http://i.imgur.com/yEozFdm.png

The server that serves the pages is Mongoose, the one @ localhost:5000 is Flask, who returns the following headers in order for the CORS to work.

@mod.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', 'http://localhost:8080')
    response.headers.add('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
    response.headers.add('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type,     Accept')

Anyone knows why Chrome is delaying the OPTIONS request? (From the flask server debug console, it seems that the OPTIONS method really only arrives 10-20 seconds after the page has been reloaded). It seems to work fine in Firefox.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

It seems to have been solved once I disabled the “Predict network actions to improve page load performance” option. Very odd, perhaps I should leave this question open for if someone could give a possible reason for this?

Edit: See comments for the reason!

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply