What can cause Chrome to give an net::ERR_FAILED on cached content against a server on localhost?

Question

I'm building a web server and trying to test things. The server is running on localhost:888, and the first time I load the web app, everything works. But if I try to reload the page, a bunch of XmlHttpRequest requests fail with net::ERR_FAILED. By putting breakpoints in the server code, I can verify that the requests are never actually coming in.

This isn't a connection failure, as the connection succeeds the first time. The fact that it succeeds once and then fails later implies that it might be caching-related, but there's nothing in the server code that sets the cache-control header. So I tested it by putting the server up on an actual web server. The first time, everything had to take its time loading; the second time, it all loaded instantly, so this is definitely cache-related

This is a custom server running on top of http.sys (no IIS), and it appears that things are getting cached by default and then failing to load from it on subsequent runs, but only when my server is running on localhost; on the Web, it works fine. As near as I can tell, net::ERR_FAILED is a generic "something went wrong and we've got no useful information for you" message in Chrome, so I'm kind of stuck here. Does anyone know what could be causing this?

One possible reason is that your AppCache Manifest does not allow it. I suppose there may be many other reasons as well (CORS?). — , May 19 '14 at 22:13
Do you have any CORS issues? Please try to disable web security in chrome and see if the problem persist. To disable use smt like: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security from command line. — GibboK, Sep 29 '14 at 14:21
Are you running AdBlock? It has been known to cause errors like these on local environments. — Denis Priebe, Nov 17 '14 at 16:24

rofrol · Answer 1 · 2020-08-12T14:27:04.893

50

I run into similar problem. I have copied request as fetch in Network tab in devtools.

Then I have run it in browser dev console. There I could read description of the error about CORS. After setting cors on the api server, it worked.

You have to paste the fetch command into the dev console of the same origin and NOT accidentally e.g. open it from stackoverflow.

edited Aug 12 '20 at 14:27

answered Apr 18 '20 at 19:24

rofrol

14,438
7
79
77

I kept getting this error until I opened the same app URL in my browser as the API I was testing and had the DevTools console in that same window, then it started working each time. – Neil Aug 08 '23 at 19:23

score 12 · Answer 2 · answered Dec 21 '20 at 16:10

There is only one way to get to the bottom of these types of error

In chrome use chrome://net-export/ in a tab, then record the session in another and debug with https://netlog-viewer.appspot.com/#import which allows you to view the output in a more readable format.

We recently found an ERR_FAILED down to the socket being closed because of a proxy authentication issue on the clients network.

This can also be useful reference once you've got the error code from the above chrome://network-errors/

score 11 · Answer 3 · answered Jul 13 '20 at 12:05

Another cause is, when you use withCredentials: true (sending cross origin cookies) for XHR calls, you are not allowed to set Access-Control-Allow-Origin: *, but have to provide a specific domain!

Sadly, you cannot use a list of domains here, because no browser supports this official standard. But several frameworks, like Spring, allow you to set a whitelist configuration, which then is matched on request.

See also:

CORS: Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true
Header in the response must not be the wildcard '*' when the request's credentials mode is 'include'
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials

score 10 · Answer 4 · answered Sep 01 '20 at 11:46

One very important and un-loved comment in this set of answers is, "Look at your CORS headers." I had a problem much like this, and it gave me this error with some prodding. No data in my Apache logs, but I noticed that we were calling a secondary URL and getting no response for that secondary URL.

Chrome didn't initially call it a CORS issue, but lack of response caused me to dig into our Apache settings and change the allowable CORS source header.

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
        Header set Access-Control-Allow-Origin "https://our-site.com"
        Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
        Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

</Directory>

This answer may not apply to YOUR situation, but it applied to my net::ERR_FAILED

score 5 · Answer 5 · edited Jul 02 '20 at 20:40

5

One possible reason is that you write your AppCache Manifest wrong. For example: in you /a/b/cache.html file you refer the cache.appcache Manifest file, but in cache.appcache file you announce like:

CACHE:

/cache.html

which is wrong.

you should write:

CACHE:

/a/b/cache.html

hope this can help you.

edited Jul 02 '20 at 20:40

Graham P Heath

7,009
3
31
45

answered Feb 27 '15 at 06:49

materliu

639
7
10

score 5 · Answer 6 · answered Oct 07 '20 at 08:40

5

Another potential cause is the request being handled by a service worker that runs into some sort of trouble. In this case it's worth checking the service worker console in the dev tools to see if there's an error message there.

answered Oct 07 '20 at 08:40

ehrencrona

6,102
1
18
24

important notice - a lot of people don't know this – Daniel Resch Jul 28 '23 at 23:48

score 5 · Answer 7 · answered Nov 15 '20 at 19:10

5

In my case installing an SSL certificate fixed the issue.

answered Nov 15 '20 at 19:10

Daniel Resch

584
3
12

Ibad Shah · Answer 8 · 2021-03-20T10:32:26.490

Add "proxy": "http://localhost:port_number/" at the last line in package.json and mode: 'same-origin' in the request body at the client-side. For example,

fetch('login', {
      method: 'post',
      mode: 'same-origin',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: username,
        password: password,
      })
    })

score 3 · Answer 9 · answered May 02 '19 at 06:48

I ran into this error on my localhost (on a monday morning) when requesting one of my virtual hosts. Turned out I still had a unfinished debugging action running (unfinished business from my friday afternoon :) ) on another virtual host which blocked Apache from serving the files for the other request. This resulted in the net::ERR_FAILED error in my browser console.

Hope this might be helpful for others ending up here.

score 1 · Answer 10 · answered Jan 31 '21 at 02:16

If using node, make sure your CORS headers are added before the route. IE

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.get('/route.htm', function (req, res) {
    res.sendFile( __dirname + "/" + "route.htm" );
});

Instead of the other way around putting app.use after.

score 0 · Answer 11 · answered Oct 05 '22 at 15:48

This happened to someone on Mac OS / Chrome but not on Safari. And seems to have emerged recently (i.e. - likely not from a code deploy... Maybe a Chrome update?). I can't reproduce it on other computers with Chrome. Restarting Chrome and the computer didn't help.

I didn't notice anything strange in Extensions and they said they hadn't installed anything new.

Posting in case there is a newly emerging issue on Chrome.

What can cause Chrome to give an net::ERR_FAILED on cached content against a server on localhost?

11 Answers11

Linked