对于成功的同源请求，Fetch 会抛出“TypeError: Failed to fetch”

Question

We have been encountering inconsistent client errors with a single-page JavaScript application making fetch requests. Of note, they are all same-origin requests.

let request = new Request(url, options);
...
window.fetch(request)
  .then(response => response.json())
  .then(data => ...)
  .catch(error => ...)

Around 5% of the promises are rejecting with the following error despite the server and the browser receiving a 200 OK response:

TypeError: Failed to fetch

I'm stumped... All of my searches lead to discussions about CORS errors. That doesn't seem to apply given these are all same-origin requests. What is causing the fetch to throw the TypeError ?

I can confirm using the Network tab in Chrome DevTools that the fetch request completes with a 200 OK response and valid JSON. I can also confirm that the URLs are same-origin. I can also confirm that there are no CORS pre-flight requests. I have reproduced this issue on Chrome 66 and Safari 11.1. However, we've received a stream of error reports from a mix of Chrome and Safari versions, both desktop and mobile.

---

EDIT:

This does not appear to be a duplicate of the linked question as we are not sending CORS requests, not setting mode: "no-cors" , and not setting the Access-Control-Allow-Origin header.

Additionally, I re-ran tests with the mode: 'same-origin' option set explicitly. The requests are (still) successful; however, we (still) receive the intermittent TypeError .

Answer 1

I know that this is an old issue, but after searching the entire evening I want to share my findings so you can spend your time better.

My web app also worked well for most users but from time to time visitors received the error mentioned in the question. I'm not using any complicated infrastructure (reverse proxy etc.) setup nor do I communicate with services on a different domain/protocol/port. I'm just sending a POST request to a PHP-File on the same server where the React app is served from.

The short answer: My problem was that I've sent the request to the backend by using an absolute URL, like https://my-fancy-domain.com/funky_service.php . After changing this to a relative path like /funky-service.php the issue was gone.

My explanation: Most users come to the site without www in the URL, but some users actually do type this part in their address bars ( www.my-fancy... ). It turned out that the www is part of the origin , so when these users submit the form and send post requests to https://my-fancy... it's technically another origin. This is why the browser expects CORS headers and sometimes even sends an OPTIONS preflight request. When you use a relative path in your JavaScript-Code the post request will also include the www-part (uses the origin from the address bar) -> same-origin -> no CORS hassle. As it only affects visitors that come with the www to your site it also explains the fact that it worked for most users even with the absolute URL.

Also important to know: The request fails in the browser/ JavaScript-Code but is actually sent to the backend (very ugly!).

Let me know if you need more information. Actually, it is very simple but hard to explain (and to find)

Answer 2

The issue could be with the response you are receiving from back-end. If it was working fine on the server then the problem could be with the response headers. Check the Access-Control-Allow-Origin (ACAO) in the response headers. Usually react's fetch API will throw fail to fetch even after receiving response when the response headers' ACAO and the origin of request won't match.

Ref: Getting "TypeError: failed to fetch" when the request hasn't actually failed