ES6 Fetch Always Returns Response Ok as False, Why??

I recently developed a ReactJS application and of course I used the ES6 syntax along with Babel and various other polyfills.

In order to send XHR requests to the backend, I have used the fetch() call. The request was successful and I could see from the network console that the server had returned 200 ok along with the correct responses. 

The problem was that the promise resolved by fetch() always returns response.ok = false and status code as zero. What gives? It took me a while to realize the problem.

It seems because I was trying to use mode: no-cors the response code will always be zero. This is because that mode is meant to be used to pull assets from a cdn of some sort. Good ‘ol CORS issue…

So the solution is to update the api server to send the CORS headers and not use no-cors anymore.

Hope this post help others and save unnecessary frustrations.

Categorised in: Coding