CODEWITHSUNDEEP
javascriptreactjshttpaxiosput
Ichrak Mansour
Ichrak Mansour

Reputation: 1932

PUT request doesn't work on Axios

I want to update the data of the row of my table developed with Node.js on the backend, React on frontend and MySQL about the database.

My Edit class: 

constructor(props) {
  super(props)
  this.state = {
    clients: [],
    Prenom: '',
    Nom: '',
    FAX: '',
    Telephone: '',
    Email: '',
    Adresse1: '',
    Adresse2: '',
    Code: props.match.params.Code
  }
  // this.logChange = this.logChange.bind(this);
  this.handleEdit = this.handleEdit.bind(this);
}
handleEdit(event) {
  //Edit functionality
  //event.preventDefault()
  var client = {
    Prenom: this.state.Prenom,
    Nom: this.state.Nom,
    FAX: this.state.FAX,
    Telephone: this.state.Telephone,
    Email: this.state.Email,
    Adresse1: this.state.Adresse1,
    Adresse2: this.state.Adresse2
  }
  axios({
    method: 'put',
    url: "http://localhost:4000/app/editclient/" + this.props.match.params.Code,
    data: client,
    withCredentials: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json",
      "Accept": "application/json",
    }
  }).then(function(response) { // empty form
    this.setState({
      Code: ""
    });
    this.setState({
      Prenom: ""
    });
    this.setState({
      Nom: ""
    });
    this.setState({
      FAX: ""
    });
    this.setState({
      Telephone: ""
    });
    this.setState({
      Email: ""
    });
    this.setState({
      Adresse1: ""
    });
    this.setState({
      Adresse2: ""
    });
  }.bind(this)).catch(function(error) {
    console.log(error);
  });
  event.preventDefault();
}
<Button type="submit" color="success" onClick={(event) => this. handleEdit(event)} >Modifier</Button>

My router: 

exports.editclient = function(req, res) {
  var data = {
    Prenom: req.body.Prenom,
    Nom: req.body.Nom,
    FAX: req.body.FAX,
    Telephone: req.body.Telephone,
    Email: req.body.Email,
    Adresse1: req.body.Adresse1,
    Adresse2: req.body.Adresse2,
  };
  var Code = req.params.Code
  console.log(req.params);
  // var Code = data.Code
  connection.query("UPDATE clients set ? WHERE Code = ? ", [data, req.params.Code], function(error, results, fields) {
    if (error) throw error;
    else {
      res.send(JSON.stringify(results));
      console.log("Data is updated");
    }
  });
};

My server: 

router.put('/editclient/:Code', clients.editclient);

I run the backend with Postman with URL http://localhost:4000/app/editclient/2222 it works well, but when I run the frontend, the data are not updated and I get :

enter image description here

How can I fix that ?

Upvotes: 0

Views: 1544

Answers (1)

Kaloyan Kosev
Kaloyan Kosev

Reputation: 13067

The cross-origin resource sharing (CORS) is not enabled for the localhost:4000 server you're trying to access. That's why it doesn't work.

On the other hand, it works with Postman, because Postman it's a dev tool, not a browser. Therefore, it doesn't get affected by CORS not being enabled.

Here's the easiest way to enable CORS support to your server, if you use Express for NodeJS.

Use the node.js package cors. The simplest usage is:

var cors = require('cors')

var app = express()
app.use(cors())

Upvotes: 2

Related Questions