Question

我想在React中创建一个简单的登录名，但是我不知道如何将表单信息保存在类似MySQL数据库中。

我尝试在Express.js中创建一个API，但是在尝试发送内容时却得到了以下信息：

Access to XMLHttpRequest at 'http://localhost:5000/api/world' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

HandleClick函数：

handleClick(e) {
  let apiURL = 'http://localhost:5000/api/';
  $('.btn').addClass('disabled');
  $('.btn').html('<div class="spinner-border" role="status"></div>');
  let payload = {
    "email": this.state.email,
    "password": this.state.password
  }
  Axios.post(apiURL + 'world', payload)
    .then(function (response) {
      console.log(response);
      if (response.data.code === 200) {
        console.log('Logged in!!!!');
      } else if (response.data.code === 204) {
        console.log('Bad pass');
        ('.btn').removeClass('disabled');
        $('.btn').html('Spróbuj jeszcze raz');
        $('#error').text('Bad pass');
      } else {
        console.log('No user');
        ('.btn').removeClass('disabled');
        $('.btn').html('Spróbuj jeszcze raz');
        $('#error').text('No user');
      }
    })
    .catch((error) => {
      console.log(error);
      $('.btn').removeClass('disabled');
      $('.btn').html('Spróbuj jeszcze raz');
      $('#error').text(error);
    });
}

我想要一些可以发送信息并获取信息的地方。就像CRUD。

Answer 1

您可以使用CORS中间件来允许不同的域使用您的Express应用

npm install cors
实施CORS中间件以允许您的React App的域使用Express App的API

index.js（您的Express应用的主文件）

const cors = require('cors');
const app = express();
...

const corsOptions = {
  origin: 'https://yourreactappsdomain.com'
}

app.use(cors(corsOptions));

...

您可以阅读this article，其中详细说明了您面临此问题的原因以及解决方法。

如何在React中创建数据库或API并通过axios或其他方式获取所有行？

1 个答案: