REACT, NODE, EXPRESS Error when connect to API

Question

I get errors:

localhost/:1 Failed to load http://localhost:5000/api/hello: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is my asynchronously POST:

async function submitToServer(data){

  try{
      let response = await fetch('http://localhost:5000/api/hello', {
          method: 'POST',
          headers: {
            'Content-type' :  'application/json',
          },
          body: JSON.stringify(data),
        });
        let responseJson = await response.json();
        return responseJson;
  }   catch (error) {
          console.error(error);
  }
}

And this is my server:

const express = require('express');

const app = express();
const port = process.env.PORT || 5000;

app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.listen(port, () => console.log(`Listening on port ${port}`));

What should I do to send this information to the API?
Do I need to create an endpoint or something?

So I installed cors npm.
Now I have these errors:

POST localhost:5000/api/hello 404 (Not Found)

and

SyntaxError: Unexpected token < in JSON at position 0

What can I do now?

Is this the same as my answer for stackoverflow.com/questions/50543641/…? — coderHASH64codingHASH46code
– coderHASH64codingHASH46code, Commented Jun 2, 2018 at 14:51

Cisco · Accepted Answer · 2018-06-02 15:48:19Z

2

You are not returning JSON from your express server.

res.send({ express: 'Hello From Express' });

should be

res.json({ express: 'Hello From Express' });

Also, you defined the route for GET, yet you sending a POST request. So your handler should be:

app.post('/api/hello', (req, res) => {
  res.json({ express: 'Hello From Express' });
});

edited Jun 2, 2018 at 15:48

answered Jun 2, 2018 at 15:40

Cisco

23.5k6 gold badges44 silver badges67 bronze badges

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

3 Comments

Piotr Żak Over a year ago

Still. StepOneValidationForm.js:42 SyntaxError: Unexpected token < in JSON at position 0

Piotr Żak Over a year ago

Ok how now i can display this data?

Cisco Over a year ago

Ask a new question.

Collectives™ on Stack Overflow

REACT, NODE, EXPRESS Error when connect to API

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related