用React将数据发送到MySQL

Question

我正在创建一个出版应用程序，需要使用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并成功地从数据库中检索数据，所以我不确定我做错了什么。非常感谢任何建议。提前致谢。

- Alexander Nenartovich

---

你在提交表单时检查了字段的值吗？在状态中？ 同时确保在路由回调函数中获取到了精确的数据。 我在我的应用程序中使用PostgreSQL数据库和React组件测试了相同的代码。它像魔法一样工作。 - Krina Soni

亚历山大，你介意发布奖励吗？谢谢。 - itsben

Answer 1

您需要先验证您的服务点是否启用了CORS。为了专注于CORS功能，建议暂时移除MySQL代码以便更好地定位问题。

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(cors());

app.get('/', function(req, res){
  var root = {};
  root.status = 'success';
  root.method = 'index';
  var json = JSON.stringify(root);
  res.send(json);
});

app.post('/cors', function(req, res) {
  var root = {};
  root.status = 'success';
  root.method = 'cors';
  var json = JSON.stringify(root);
  res.send(json);
})

// Start the server
app.listen(3300, () => {
   console.log('Listening on port 3300');
 });

一旦您的服务器在端口3300上监听，就在终端中运行以下PREFLIGHT命令。

curl -v \
-H "Origin: https://example.com" \
-H "Access-Control-Request-Headers: X-Custom-Header" \
-H "Acess-Control-Request-Method: POST" \
-X OPTIONS \
http://localhost:3300

如果预检请求成功，响应应包含Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers。

现在运行POST方法。

curl -v \
-H "Origin: https://example.com" \
-H "X-Custom-Header: value" \
-X POST \
http://localhost:3300/cors

如果POST请求成功，响应应包含Access-Control-Allow-Origin。

如果一切正常，您的服务器就没问题了。然后您需要从iOS应用程序尝试POST方法。

注意：我也会怀疑在本地主机上使用CORS。我会将127.0.0.1映射到一个域名上，然后让应用程序使用该域名。如果您使用的是Linux或Mac，则可以修改/etc/hosts文件。对于Windows系统，则位于c:\windows\system32\drivers\etc\hosts。

- itsben

---

是的，一切都如你所说地运行，我收到了正确的响应，但当我尝试从React应用程序发布时，它仍然给我相同的错误。 - Alexander Nenartovich

好的，我需要启动React代码来解决那个部分的问题。 - itsben

Answer 2

尝试明确列出发起请求的服务器白名单：

const whitelist = ['http://localhost:3000']; // React app

const corsInstance = cors({
  origin: (origin, callback) => {
    if (!origin || whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
});

application.use(corsInstance);

https://expressjs.com/en/resources/middleware/cors.html#configuring-cors-w-dynamic-origin

- lux

---

将上述代码插入到我的server.js文件中，但仍然遗憾地出现了相同的错误... - Alexander Nenartovich

@AlexanderNenartovich它是否记录了“不允许由CORS”错误？ 如果是，尝试记录“origin”，以查看被拒绝的内容。 - lux

它记录了与我上面展示的完全相同的错误 - Fetch API无法加载http://localhost:3000...由于访问控制检查。它没有具体提到CORS。 - Alexander Nenartovich

Answer 3

你需要在handleSubmit方法的末尾添加event.preventDefault()（请参考此示例https://stackblitz.com/edit/react-forms）。

你需要这样做的原因是为了防止表单默认行为在提交时尝试同步将数据发送到其加载的url（因为它上面没有action属性）。

- Andrei Belokopytov

---

不起作用，抱歉。错误，无法评估未定义的属性（事件未定义）。 - Alexander Nenartovich

它在StackBlitz上运行，应该也能在你的应用程序中运行。很可能是你没有将“event”参数传递给“handleSubmit”方法。 - Andrei Belokopytov

我已经传递了事件参数。现在没有错误，但是什么也没有发生。没有将任何内容插入到数据库中，也没有发送任何内容到服务器。不知道出了什么问题。 - Alexander Nenartovich

你是正确的，将事件参数传递给handleSubmit解决了未定义错误，但现在当我点击提交按钮时，什么也不会发生。没有错误，也没有数据被发送或插入到任何地方。 - Alexander Nenartovich

你刚刚帮我省了另外一周的时间来解决这个问题。这是一个更详细的解决方案，基于你的答案，以防有人需要：https://dev59.com/CkcFtIcB2Jgan1znsMQ2#60911038 - GeeMitchey

Answer 4

对于那些可能遇到类似问题的人，我能够通过完全放弃 Express 服务器来解决它。我只是使用 Apache 服务器上的 .php 文件将数据插入数据库。希望能帮助到某些人。

- Alexander Nenartovich