Handle response - SyntaxError: Unexpected end of input when using mode: 'no-cors'

Question

I tried a ReactJS fetch call to a REST-API and want to handle the response. The call works, i get a response, which i can see in Chrome Dev Tools:

function g         


        

Answer 1

You need to remove the mode: 'no-cors' setting from your request. Setting no-cors mode is exactly the cause of the problem you’re having.

A no-cors request makes the response type opaque. The log snippet in the question shows that. And opaque means your frontend JavaScript code can’t see the response body or headers.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode explains:

no-cors — JavaScript may not access any properties of the resulting Response

So the effect of setting no-cors mode is essentially to tell browsers, “Don’t let frontend JavaScript code access the response body or headers under any circumstances.”

I imagine you’re trying no-cors because the response from http://localhost:8080/course doesn’t include the Access-Control-Allow-Origin response header or else because your request is one that triggers a CORS preflight, and so your browser’s doing an OPTIONS preflight.

But using no-cors mode is not the solution to those problems. The solution is either to:

• configure the http://localhost:8080 server to send the Access-Control-Allow-Origin response header and to handle the OPTIONS request

• or set up a CORS proxy using code from https://github.com/Rob--W/cors-anywhere/ or such (see the How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems section of the answer at No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API)