We Keep Coding

Fetch throws "TypeError: Failed to fetch" for successful, same-origin request

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.

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)

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

Api Gateway cannot allow Access-Control-Allow-Origin

This url is in AWS API Gateway with method get and stage is well deployed.
And I enabled CORS following the aws document.
Here are my steps to enable CORS.
-Resource->action->enable CORS->
default setting ->enable CORS and replacing the CORS headers.
There is no error log in CORS result.
I am not a profesional web developer and my browser is safari.
Here is my code to query "http://my.com"
function request(idex) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.status == 200)
callback(xmlHttp.responseText);
}
xmlHttp.open("GET", "http://my.com", true);
xmlHttp.send(null);}
The console print the error :
XMLHttpRequest cannot load "http://my.com" Origin http://example.com is not allowed by Access-Control-Allow-Origin.
If there are some mistakes in javascript request or in API Gateway deploy?

After consulting and trying each method, I found the error as following.
According to AWS document, we can not deploy our api before enabling CORS. All the settings about the header and CORS must be set before being deployed.
But the API Gateway does not block this setting nor does it show any error dialog. API Gateway will not change the header even if your setting process shows success.

The cross origin problem is from server side not javascript side. When the server does not allow request from other domains it throws cross origin error. But you said you already added CORS in aws instance
As the javascript is only accessing the service from my.com, You need to added proper domain mapping in your my.com site to tell that request will come from another domain called example.com. might be the server is not properly configured. or try if server is expecting any header.
try to see the result in any rest client like soapui, rect client plugin in chrome, etc. once you confirm that there is no problem in server, try it from javascript
To test there is a chrome plugin you can try
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

difference between browser and script

I have my own node.js written in C. When I open the browser and browse to 192.168.0.150:8000/index and call the script:
var socket = io.connect("/index");
socket.on('connect', function() {
$('#onindex').addClass('connected');
});
every thing is OK.
BUT:
When I try to:
var socket = new io.Socket('192.168.0.150', {port: 8000 });
socket.connect("/index.html");
I get the following error on the Javascript console:
XMLHttpRequest cannot load 192.168.0.150/index.html:80/socket.io/xhr-polling//…. Origin null is not allowed by Access-Control-Allow-Origin.
This indicates to me that the server can't find it.
How can I fake the JS to think I'm browsing?

Let's break down your error message
XMLHttpRequest
The problem was with XMLHttpRequest (on the side running the script)
cannot load 192.168.0.150/index.html:80/socket.io/xhr-polling//….
it couldn't load the page
Origin null is not allowed by Access-Control-Allow-Origin.
because it is not allowed to by Access-Control-Allow-Origin settings preventing an origin of null.
You can read up about access control here on MDN. An origin of null can arise from a page located on a data URI or using the file: protocol. This is part of the same-origin policy which you can read about here. You may have to set up CORS on your server to get it to work.

Xmlhttprequest Cross site domain issue?

been stuck with an issue for sometime and not getting the best solution for this yet.
I am calling an xmlhttprequest (POST)from a javascript residing at server say 'http://localhost:8080' to another server 'http://localhost:9090'
Getting an browser error As mentioned below:
Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)"  nsresult: "0x80004005 (NS_ERROR_FAILURE)" 
 
The error doesnt point anything specific either. Did test the same by calling from same server and worked fine. But i am looking at two server architecture.
Any resolution/ideas ? Saw few posts on setting response headers with cross domain origin as '*',but not sure exactly how to set response headers for xmlhhtprequest calls?

Since the origins of the entities that are trying to communicate are the same in the host part but different in the port part (localhost:8080 <-> localhost:9090) -- this violates the same origin policy and the browser throws an error. See this for more info: http://en.wikipedia.org/wiki/Same_origin_policy
The way to get around this is to use CORS headers in the HTTP responses returned by the server. The fact that you are using XHR to generate the HTTP requests makes no difference. Basically, what you need to do is add a Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: http://localhost:8080 to your responses for POST requests to http://localhost:9090. This of course assumes that you have control over the server resource you are POSTing to so that you can modify the response headers. See this for more info: http://enable-cors.org/ and http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

How can I see if the same-origin-policy was applied?

I am testing a website in Firefox 8.
I am using a jQuery.post call on a different domain.
In Firebug the result is just empty.
Can I see if this is due to the same origin policy? The error console is empty.

No, I don't think you can.
But you can try to rule out other problems. Like your Ajax code is not working by making a normal Ajax request (not cross domain) to a static file. Also make a Ajax request to a static file on the target domain for the case where the server is down.