Unexpected end of input when using fetch API in react [duplicate]

Question

I am using fetch to simply get data from a dummy api endpoint, but I get an unexpected end of input error when I add in the configs in the fetch function.

This works just fine and console logs an array of 200 items

componentDidMount() {
    let url = 'https://jsonplaceholder.typicode.com/todos';
    let config =  {
      method: "GET",
      mode: "no-cors",
      headers: {
        "access-control-allow-origin" : "*",
        "Content-type": "application/json; charset=UTF-8",
        "access-control-allow-headers": "content-type"
      }
    };


    fetch(url)
      .then(res => res.json())
      .then(data => this.setState({ data, }))

}

But when I add in the configs as a parameter, it shows and error.

componentDidMount() {
    let url = 'https://jsonplaceholder.typicode.com/todos';
    let config =  {
      method: "GET",
      mode: "no-cors",
      headers: {
        "access-control-allow-origin" : "*",
        "Content-type": "application/json; charset=UTF-8",
        "access-control-allow-headers": "content-type"
      }
    };


    fetch(url, config)   // This is where the error occurs
      .then(res => res.json())
      .then(data => this.setState({ data, }))

}

Error:

Dashboard.jsx:35 Uncaught (in promise) SyntaxError: Unexpected end of input
    at Dashboard.jsx:35

and

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://jsonplaceholder.typicode.com/todos with MIME type application/json.

Why are you sending access-control-allow-origin (CORS) headers from client side fetch API. These should be sent from server to avoid cross domain issues. Remove access-control-allow-headers and access-control-allow-origin headers. Here is working code sandbox link — tarzen chugh
– tarzen chugh, Commented Jun 3, 2019 at 13:21

Roy.B · Accepted Answer · 2019-06-03 13:07:15Z

0

first of all change mode: 'no-cors' to mode: 'cors'

about the CORS issue

You'll need to update the CORS headers on the server you are trying to request information from. These CORS policies are in place for security purposes

if you have access to it add this header :

'Access-Control-Allow-Origin: *'

or

'Access-Control-Allow-Origin: http://example.com'

answered Jun 3, 2019 at 13:07

Roy.B

2,10417 silver badges24 bronze badges

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

2 Comments

Gagan Ganapathy Sudhir Ajjikut Over a year ago

I am actually building an electron app, disabling cors on the browser doesnt help, and also I have included the above header that you have suggested but am still getting the CORS error!

Roy.B Over a year ago

@GaganGanapathySudhirAjjikut read carefully my answer, you will need to add headers to the server side if you have access to it

Collectives™ on Stack Overflow

Unexpected end of input when using fetch API in react [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related