[英]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. 我想更新在后端使用Node.js ,在前端使用React以及关于数据库的MySQL开发的表行的数据。
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 : 我使用网址为
http://localhost:4000/app/editclient/2222
Postman运行后端,它运行良好,但是运行前端时,数据未更新,我得到:
How can I fix that ? 我该如何解决?
The cross-origin resource sharing (CORS) is not enabled for the localhost:4000
server you're trying to access. 您尝试访问的
localhost:4000
服务器未启用跨域资源共享(CORS)。 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. 另一方面,它可与Postman一起使用,因为Postman是开发工具,而不是浏览器。 Therefore, it doesn't get affected by CORS not being enabled.
因此,它不会受到未启用CORS的影响。
Here's the easiest way to enable CORS support to your server, if you use Express for NodeJS . 如果使用Express for NodeJS,这是对服务器启用CORS支持的最简单方法 。
Use the node.js package cors .
使用node.js包cors 。 The simplest usage is:
最简单的用法是:
var cors = require('cors') var app = express() app.use(cors())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.