PUT request doesn't work on Axios

Question

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 :

How can I fix that ?

try removing "Access-Control-Allow-Origin": "*" , because the server is suppose to specify this access not the client... — KpTheConstructor, Jul 19 '18 at 20:20
@mikkelrd the port 3000 is affected to ReactJS and 4000 to NodeJs. — Ichrak Mansour, Jul 19 '18 at 20:43
Possible duplicate of [How to overcome the CORS issue in ReactJS](https://stackoverflow.com/questions/43462367/how-to-overcome-the-cors-issue-in-reactjs) — Patrick Roberts, Jul 19 '18 at 20:55
I resolve it, to add `:Code` on my route `{ path: '/clients/editclient/:Code', name: 'EditClient', component: EditClient }` — Ichrak Mansour, Jul 19 '18 at 21:09

Kaloyan Kosev · Accepted Answer · 2018-07-19T21:32:56.487

2

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())

edited Jul 19 '18 at 21:32

answered Jul 19 '18 at 21:25

Kaloyan Kosev

12,483
8
59
90

1

Thanks @Kaloyan I resolve it, to add cors and `:Code` on my route `{ path: '/clients/editclient/:Code', name: 'EditClient', component: EditClient }` – Ichrak Mansour Jul 19 '18 at 21:34

PUT request doesn't work on Axios

1 Answers1