Отправка данных из React в MySQL - PullRequest
Новая
       20

Отправка данных из React в MySQL

8 голосов
/ 02 мая 2019

Я создаю приложение для публикации, которое должно использовать связь между 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 и может успешно извлекать данные из базы данных, я не уверен, что я делаю неправильно.Любые предложения будут с благодарностью.Заранее спасибо.

Ответы [ 4 ]

3 голосов
/ 14 мая 2019

Вам нужно будет изолировать проблему, сначала проверив, что ваша точка обслуживания включена. Чтобы сосредоточиться исключительно на функциональности 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

Если почтовый запрос был успешным, ответ должен включать Access-Control-Allow-Origin

Если все выглядит хорошо, ваш сервер в порядке. Затем вам нужно попробовать метод post из вашего приложения для iOS.

Примечание. Я также был бы с подозрением использовать cors на localhost. Я бы сопоставил 127.0.0.1 с доменом, а затем использовал бы приложение вместо этого домена. Если вы используете Linux или Mac, вы изменяете / etc / hosts. Для Windows это c: \ windows \ system32 \ drivers \ etc \ hosts

1 голос
/ 09 мая 2019

Попробуйте явно внести в белый список сервер, который делает запрос: 

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

0 голосов
/ 25 мая 2019

Для тех, кто, возможно, столкнулся с подобной проблемой, я смог исправить ее, полностью выгрузив экспресс-сервер.Я просто использовал файл .php на сервере Apache для вставки данных в базу данных.Надеюсь, это кому-нибудь поможет.

0 голосов
/ 14 мая 2019

Вам нужно добавить event.preventDefault() в конце вашего handleSubmit метода (проверьте этот пример https://stackblitz.com/edit/react-forms).

Вы должны сделать это по причине предотвращения поведения формы по умолчанию при отправке: он пытается синхронно отправлять данные на URL-адрес, с которого он загружен (поскольку в нем нет атрибута action).

...