Fetch with headers

Question

When use fetch for request in server using headers return

SyntaxError: Unexpected end of input at index.js:50 at <anonymous>

Line of code 50 is }).then(res => res.json())

What can be wrong?

This code fetch.

fetch(api-url, { mode: 'no-cors', method: "POST", headers: { 'Accept': 'application/json', 'Content-Type': ' application/json', 'X-API-SERVER': '85499f9f' }, }).then(res => res.json()) .then(res => { if (res.status === 200){ console.log("accepted"); }else { console.log(res.error); } console.log(res.error) }).catch(err => console.log(err))

Your API endpoint is returning something other than valid JSON. — joews
– joews, Commented Jul 6, 2017 at 22:39
when the fetch response is successful, are you setting the result state to the given response? — Jose Paredes
– Jose Paredes, Commented Jul 6, 2017 at 22:53

Fabian Schultz · Accepted Answer · 2017-07-06 22:36:43Z

3

Since you're requesting an API, you don't want to disable CORS. It's probably enough to just remove mode: 'no-cors' in your fetch request to fix this, as long as your API server sends the correct headers as well (Access-Control-Allow-Origin).

answered Jul 6, 2017 at 22:36

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

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

2 Comments

user3058963 Over a year ago

when postman return ok but when fecth return this when remove no-cors. Fetch API cannot load https://-app-dobled.herokuapp.com/api/v1/create. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. index.js:60 TypeError: Failed to fetch

Fabian Schultz Over a year ago

Yes, exactly. Set the Access-Control-Allow-Origin header on your server's routes. You don't want to use no-cors here. It's a backend issue, not one on the frontend.

xastor · Accepted Answer · 2022-06-07 07:56:13Z

With res.status you're trying to retrieve the status property from the response body (as returned by the json() function), not the response object itself.

Collectives™ on Stack Overflow

Fetch with headers

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related