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?

Possible duplicate of [How to allow CORS?](https://stackoverflow.com/questions/7067966/how-to-allow-cors) — Tomasz Mularczyk, Jun 02 '18 at 13:04
Is this the same as my answer for https://stackoverflow.com/questions/50543641/express-route-index-js-not-working-in-my-react-app/50543922#50543922? — coderHASH64codingHASH46code, Jun 02 '18 at 14:51

Cisco · Accepted Answer · 2018-06-02T15:48:19.070

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 02 '18 at 15:48

answered Jun 02 '18 at 15:40

Cisco

20,972
5
38
60

Still. StepOneValidationForm.js:42 SyntaxError: Unexpected token < in JSON at position 0 – Piotr Żak Jun 02 '18 at 15:43
Ok how now i can display this data? – Piotr Żak Jun 02 '18 at 16:25
1

Ask a new question. – Cisco Jun 02 '18 at 16:34

REACT, NODE, EXPRESS Error when connect to API

1 Answers1