Uncaught (in promise) SyntaxError: Unexpected end of input in React when fetching the API

Question

Facing the error when I trying to use fetch(api) this in React.

fetch(url, {mode: "no-cors"})
.then(response => console.log(response.json()))
.catch(error => console.log('Error:', error));

The error message is:

Promise {: SyntaxError: Unexpected end of input at http://localhost:3000/static/js/main.chunk.js:420:46} CalendarCommentary.js:22 Uncaught (in promise) SyntaxError: Unexpected end of input

I'm using react and react-router-dom. I saw other answer is to add a header of server endpoint or something. But I cannot modify the server. Is there any other way to solve this?

The error is in the JSON that your server has returned. Use the browser network tab to inspect the HTTP response; it will probably be obvious. — Pointy
– Pointy, Commented Jul 11, 2019 at 14:26
And if the API (the url) is in a different domain, it may not allow your page to directly make requests to it. All you can do in that case is create your own proxy for the API in your own domain. — Pointy
– Pointy, Commented Jul 11, 2019 at 14:27
Inspect the actual request itself in browser dev tools network and see what is returned in response body — charlietfl
– charlietfl, Commented Jul 11, 2019 at 14:32

Quentin · Accepted Answer · 2019-07-11 14:34:00Z

1

You said:

{mode: "no-cors"}

This means "Do nothing that requires CORS. Do not report CORS related errors".

If you make a cross-origin request with this then the response will be blank. You cannot read the actual response without permission from CORS.

Since the response you are getting is blank you get to the end of it before any valid JSON is found (i.e. .json() expects to find JSON and unexpectedly gets to the end of the input before finding any).

Use:

{mode: "cors"}

But I cannot modify the server.

If the server doesn't grant permission via CORS, and you can't change that, then get the data from somewhere else (e.g. a proxy script on an origin you control).

answered Jul 11, 2019 at 14:34

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uncaught (in promise) SyntaxError: Unexpected end of input in React when fetching the API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related