Very basic React + NodeJS fetch: Why is my response not what I want?

Question

Here's what I did on the react end:

  componentDidMount(){
    console.log('zzzzzzzzzzz')
    fetch('http://localhost:5000/z', {mode: 'no-cors'}).then(res=>{console.log(res)
    this.setState(res)})
  }

Here's what I did with NodeJS + Express:

app.get('/z', (req, res)=>{
  console.log('requested')
  res.send({msg: "YEEEEHAW"})
})

The request does go through, but it's not what I wanted (the 'YEEEEHAW' is nowhere to be found in browser console):

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …}
type: "opaque"
url: ""
redirected: false
status: 0
ok: false
statusText: ""
headers: Headers
__proto__: Headers
body: (...)
bodyUsed: false
__proto__: Response
type: (...)
url: (...)
redirected: (...)
status: (...)
ok: (...)
statusText: (...)
.......

What did I do wrong here? How can I fix it? (To be clear, I did look through + expand every expandable field in the logged object so I'm pretty sure I didn't miss it)

If your server responds w JSON you need to add .then(res => res.json()) before the then doing the console.log. Edit: The network tab does help a lot too! — Andre Nuechter
– Andre Nuechter, Commented Dec 30, 2019 at 0:50
Does this answer your question? How to get JSON from URL in JavaScript? — Emile Bergeron
– Emile Bergeron, Commented Dec 30, 2019 at 1:08

Alexander Vidaurre Arroyo · Accepted Answer · 2019-12-30 00:53:50Z

4

To read response content, you can use res.json():

componentDidMount(){
    console.log('zzzzzzzzzzz')
    fetch('http://localhost:5000/z', {mode: 'no-cors'})
    .then(res=>res.json())
    .then(res=>{
        console.log(res)
        this.setState(res)
    })
  }

answered Dec 30, 2019 at 0:53

Alexander Vidaurre Arroyo

2,24212 silver badges11 bronze badges

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

2 Comments

Stoodent Over a year ago

That looks like it'd work, but I got this error when I tried: 'Homepage.js:19 Uncaught (in promise) SyntaxError: Unexpected end of input'. Would you know why this is?

Alexander Vidaurre Arroyo Over a year ago

Remove no-cors and try to add cors headers to express reponse: stackoverflow.com/a/45697474/5601899 stackoverflow.com/a/18311469/5601899

anajuliabit · Accepted Answer · 2019-12-30 00:59:46Z

0

For return a json replace

res.send({msg: "YEEEEHAW"})

for

 res.json({msg: "YEEEEHAW"})

answered Dec 30, 2019 at 0:59

anajuliabit

214 bronze badges

Collectives™ on Stack Overflow

Very basic React + NodeJS fetch: Why is my response not what I want?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related