【发布时间】：2019-09-20 13:55:33
【问题描述】：
我正在创建一个发布应用程序，它需要使用 React 和 MySQL 数据库之间的通信来来回发送信息。使用 Express 作为我的 JS 服务器。服务器代码如下：
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const cors = require('cors');
const connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'ArticleDatabase',
port: 3300,
socketPath: '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock'
});
// Initialize the app
const app = express();
app.use(cors());
appl.post('/articletest', function(req, res) {
var art = req.body;
var query = connection.query("INSERT INTO articles SET ?", art,
function(err, res) {
})
})
// https://expressjs.com/en/guide/routing.html
app.get('/comments', function (req, res) {
// connection.connect();
connection.query('SELECT * FROM articles', function (error, results,
fields) {
if (error) throw error;
else {
return res.json({
data: results
})
};
});
// connection.end();
});
// Start the server
app.listen(3300, () => {
console.log('Listening on port 3300');
});
我的 React 类如下所示：
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
author: '',
text: ''
}
}
handleSubmit() {
// On submit of the form, send a POST request with the data to the
// server.
fetch('http://localhost:3300/articletest', {
body: JSON.stringify(this.state),
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'content-type': 'application/json'
},
method: 'POST',
mode: 'cors',
redirect: 'follow',
referrer: 'no-referrer',
})
.then(function (response) {
console.log(response);
if (response.status === 200) {
alert('Saved');
} else {
alert('Issues saving');
}
});
}
render() {
return (
<div>
<form onSubmit={() => this.handleSubmit()}>
<input type = "text" placeholder="title" onChange={e =>
this.setState({ title: e.target.value} )} />
<input type="text" placeholder="author" onChange={e =>
this.setState({ author: e.target.value} )} />
<textarea type="text" placeholder="text" onChange={e =>
this.setState({ text: e.target.value} )} />
<input type="Submit" />
</form>
</div>
);
}
}
我在在线教程中找到的相当标准的东西。我可以搜索我的数据库并显示获取的信息没有问题，但反过来不行。当我尝试从 <form> 标记中获取输入时，我的数据库中没有插入任何内容，但我得到了这个错误：
[Error] Fetch API cannot load
http://localhost:3000/static/js/0.chunk.js due to access control
checks.
Error: The error you provided does not contain a stack trace.
Unhandled Promise Rejection: TypeError: cancelled
我知道这与访问控制有关，但由于我已经在使用 cors 并且可以成功地从数据库中检索数据，所以我不确定我做错了什么。任何建议将不胜感激。提前谢谢你。
【问题讨论】：
-
您是否在提交表单时检查过您是否正在获取字段值？在状态？还要确保您在路由器回调函数中获得准确的数据。我在我的应用程序中使用 postgresSQL 数据库和反应组件测试了相同的代码。它就像魅力一样。
-
亚历山大，你介意发布赏金吗？谢谢。
标签： mysql node.js reactjs express fetch