Handling the Post request's Response in React JS

Question

I'm a noob to react and I'm trying to make a post request and display the responses.This is my search component where I make a post request

import React, { Component } from 'react';
import {FormGroup, ControlLabel, FormControl, HelpBlock, Button} from 'react-bootstrap';
import {fieldset} from 'purecss/build/pure.css';
import './layout.css';
import axios from 'axios';

export class Search extends React.Component{
state = {
    Movie :'',
}

handleChange = event =>{
    this.setState({Movie: event.target.value});
}


handleSubmit = event =>{
    event.preventDefault();

    const movie_name = {
        Movie: this.state.Movie
    };

    axios.post(`http://127.0.0.1:7002/get-suggestions`,{movie_name})
    .then(res =>{
        console.log(res);
        console.log(res.data);
    })
};

render(){
    return(
        <div id='layout'>
          <div className="pure-g">
            <div className="pure-u-12-24">
            <form className="pure-form" onSubmit={this.handleSubmit}>
              <fieldset>
              <legend >Enter Movie Name</legend>
                  <input type="text" placeholder="Movie" onChange={this.handleChange}/>
                  <button type="submit" class="pure-button pure-button-primary">Suggest</button>
              </fieldset>
            </form>
            </div>
          </div>
        </div>
    );
}}

I'm able make a post request sucessfully but not able to get the response to display can anyone explain me why the response is not being console.logged and the response is a list

the request to node.js URL is not making through due to Access-Control-Origin HEader. Add it like res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000'); in your node/express code — Satya, Aug 28 '18 at 09:02
Possible duplicate of [Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-get-a-no-access-control-allow-origin-header-is-present) — Amruth, Aug 28 '18 at 09:23

score 1 · Answer 1 · answered Aug 28 '18 at 09:05

1

Your post request seems to be fine but in back-end requests are blocked.

so you have to allow requests.

res.setHeader('Access-Control-Allow-Origin', '*');

make these changes in backend code.

answered Aug 28 '18 at 09:05

Amruth

5,792
2
28
41

Doesn't this assume they're using Node on the backend? – Colin Ricardo Aug 28 '18 at 09:12
ya i faced same in nodejs server so just shared – Amruth Aug 28 '18 at 09:18

score 1 · Answer 2 · answered Aug 28 '18 at 09:13

This issue isn't about react, it's about CORS (Cross-Origin Resource Sharing).

You should add appropriate headers to your backend API.

Access-Control-Allow-Origin and Access-Control-Allow-Methods at least.

It could look something like this:

// indicates that server allows cros-domain requests
//* - any origin to access the resource,
// <origin> - certain URI
setHeader('Access-Control-Allow-Origin', '<origin> or <*>')

// specifies allowed method/methods when accessing the resource
setHeader('Access-Control-Allow-Methods', 'POST')

Thank you for helping me out – rahul uday Aug 28 '18 at 17:49 — rahul uday, Aug 28 '18 at 17:49

score 1 · Answer 3 · answered Aug 28 '18 at 09:14

1

As the others have mentioned, your server should be properly set up with CORS.

If you can't modify the server code, this Chrome extension is a good temporary fix.

answered Aug 28 '18 at 09:14

Colin Ricardo

16,488
11
47
80

Handling the Post request's Response in React JS

3 Answers3