POST request from React to Node.js

Question

I don't know why this happens.

When I'm making a request to my server in Node.js and when it's GET then I can get a response. It looks like that:

fetch(config.apiUsersURL, {
    method: "GET",
    headers: {
      "Content-Type": "application/json"
    },
    credentials: "same-origin",
    mode: 'no-cors'
})
  .then(res => this.setState({
    isConected: true
  }))
  .catch(error => error);

When I'm requesting to the same url but with POST I'm getting nothing. Am I missing something?

const ObjToSend = { isReady: true };
fetch( config.apiUsersURL, {  
    method: 'POST',
    mode: 'no-cors',  
    body: JSON.stringify(ObjToSend),
    headers: {
        "Content-Type": "application/json"
    },
    credentials: "same-origin",
    mode: 'no-cors',
})
.then(res => res.json()) 
.then(r => this.setState({ questions: r }))

My endpoint looks like that:

let randomProblem2;
router.post('/', (req, resp) => {
  resp.append('Access-Control-Allow-Origin', '*')
  resp.append('Access-Control-Allow-Headers', 'Content-Type')
  console.log("this shows if yes was clicked", req.body)
  if(req.body.isReady){ //when clicked
    randomProblem2 = problemManager.getRandomProblem();
    randomize(randomProblem2, resp);
  } 
})

function randomize(randomProblem2, resp){
  resp.json({
    randomProblem : randomProblem2
  }
  )}

Could you show us the node.js endpoint?

Robert Chan
– Robert Chan

2018-06-05 13:25:34 +00:00
Commented Jun 5, 2018 at 13:25 — Robert Chan
– Robert Chan, Commented Jun 5, 2018 at 13:25
I updated the question, thank you

Murakami
– Murakami

2018-06-05 13:30:29 +00:00
Commented Jun 5, 2018 at 13:30 — Murakami
– Murakami, Commented Jun 5, 2018 at 13:30

Ragul Parani · Accepted Answer · 2018-06-05 13:30:22Z

1

Since the mode you are using is no-cors, you cannot use javascript to access the response

Quoted below from MDN:

no-cors — Prevents the method from being anything other than HEAD, GET or POST, and the headers from being anything other than simple headers. If any ServiceWorkers intercept these requests, they may not add or override any headers except for those that are simple headers. In addition, JavaScript may not access any properties of the resulting Response. This ensures that ServiceWorkers do not affect the semantics of the Web and prevents security and privacy issues arising from leaking data across domains.

Kindly check the MDN link below for the rest of mode options https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

answered Jun 5, 2018 at 13:30

Ragul Parani

6217 silver badges23 bronze badges

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

3 Comments

Murakami Over a year ago

Ok, I get it, but when I'm trying not to use cors console says I need to use no-cors mode ;)

Ragul Parani Over a year ago

You have to add "Access-Control-Allow-Origin" , "Access-Control-Allow-Headers" and "Access-Control-Allow-Methods" in your response header while sending response from Node. So follow this link : enable-cors.org/server_expressjs.html . It will be of help.

Ragul Parani Over a year ago

Sorry i missed the endpoint portion in your answer. I guess it the "Access-Control-Allow-Methods" which is causing the issue. Can you kindly add that to the response as well. Do you mind sharing the screenshot of the request and response from the network tab in inspector.

Collectives™ on Stack Overflow

POST request from React to Node.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related