I'm very new to react, and new ish to nodeJS. I'm trying to test how to pull json data from my nodeJS webservices and render it in react. I'm only at the test stage but am struggling to understand what this issues is. I can get content from demo jobs json resource with:

let url = ".json";
let iterator = fetch(url);
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3]pany_name));
  } 

but my own JSON resource is at http://localhost:8888 - so I've learned I need to set no-cors in the header to allow cross site resources, so interpretation for my own resource, I have tried:

let url = ".json";
let iterator = fetch(url, {mode: 'no-cors'});
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3]pany_name));
  } 

But this gives me an error of: "Uncaught (in promise) SyntaxError: Unexpected end of input" on the resonse.json() line.

Any ideas? Over all I would really appreciate some wider react code to take the jobs list, add it to the ponent state and then render the list - along the lines of:

ponentDidMount() {
  let url = ".json";
  let iterator = fetch(url, {method: 'GET', mode: 'no-cors'});
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3]pany_name));
} 

render() {        
    return(
        <div>
            <div>Items:</div>
            <div>{this.state.items.map etc</div>
        </div>  
    );
}

I'm very new to react, and new ish to nodeJS. I'm trying to test how to pull json data from my nodeJS webservices and render it in react. I'm only at the test stage but am struggling to understand what this issues is. I can get content from demo jobs json resource with:

let url = "http://codepen.io/jobs.json";
let iterator = fetch(url);
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3].pany_name));
  } 

but my own JSON resource is at http://localhost:8888 - so I've learned I need to set no-cors in the header to allow cross site resources, so interpretation for my own resource, I have tried:

let url = "http://codepen.io/jobs.json";
let iterator = fetch(url, {mode: 'no-cors'});
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3].pany_name));
  } 

But this gives me an error of: "Uncaught (in promise) SyntaxError: Unexpected end of input" on the resonse.json() line.

Any ideas? Over all I would really appreciate some wider react code to take the jobs list, add it to the ponent state and then render the list - along the lines of:

ponentDidMount() {
  let url = "http://codepen.io/jobs.json";
  let iterator = fetch(url, {method: 'GET', mode: 'no-cors'});
  iterator
    .then(response => response.json())
    .then(post => alert(post.jobs[3].pany_name));
} 

render() {        
    return(
        <div>
            <div>Items:</div>
            <div>{this.state.items.map etc</div>
        </div>  
    );
}

• javascript
• json
• node.js
• reactjs
• fetch-api

2 Answers 2

the response you are getting from codepen has the type: 'cors' but you are providing mode:no-cors, the server needs to send the required CORS headers in order to access the response.

ponentDidMount() {
   let url = "https://codepen.io/jobs.json";
   let iterator = fetch(url, {method: 'GET', mode: 'cors'});
   iterator
     .then(response => {
       console.log('sss', response)
       return response.json();
     })
     .then(post => alert(post.jobs[3].pany_name));
   }

render() {        
  return(
      <div>
        <div>Items:</div>
           <div>{this.state.items.map etc</div>
        </div>  
    );
}

Just to make the code in the ments of the answer a little clearer. pOk8 identified the issue. In my layman terms, I needed to change the headers of my localhost web service to enable the react fetch to work. Here is what I added to me nodeJS express service headers:

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

Hopefully that makes sense.