Опубликовать данные формы из функции отправки дескриптора React в python API?

Question

Я чрезвычайно новичок в React и Python и просто пытаюсь сделать простую запись из формы реагирования на мой Python API, которая будет взаимодействовать с mongoDB. У меня есть форма в реакции, которая вызывает функцию handleSubmit при отправке. Я хочу, чтобы функция handleSubmit отправляла POST моему API Python, работающему на порту 5000. Мое приложение реакции работает на порте 8080.

handleSubmit выглядит так:

handleSubmit(event) {
    const axios = require('axios');
    const baseUrl = 'http://localhost:5000'

    axios.post('http://localhost:5000/api/create', JSON.stringify(params))
        .end((error, response) => {
            if (!error && response) {
                console.log('got a valid response from the server')
            } else {
                console.log(`Error fetching data from the server: `, error)
            }
        });

    event.preventDefault();
}

Код конечной точки Python:

@app.route('/api/create', methods=['POST'])
def create(self):
    if request.method == 'POST':
        print(request.args.get('exp_title'))
        return True
    return False

Когда я нажимаю кнопку, моя конечная точка Python API не достигается, потому что реакция пытается отправить сообщение на маршрут через порт 8080. Чего мне не хватает?

Я попытался использовать обычный вызов ajax и получить тот же результат. В какой-то момент я что-то сделал и получил ошибку CORS в браузере, но не могу вспомнить, как я это сделал.

Answer 1

Чтобы включить cors, вам нужно установить pip install -U flask-cors, вот сайт: https://flask -cors.readthedocs.io / en / latest / или вы можете определить cors вПрокси-файл в вашем responsejs package.json, например, здесь: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

После того, как вы установите Cors в своем приложении Python, попробуйте следующее: Приложение Python:

@app.route('/api/', methods=['POST', 'GET'])
def api_post():
    if request.method == 'POST':
        print('post app')
        req = request.json
        print(req)
        return jsonify(name='john')

Приложение React:

function App() {
  const [todos, setTodos] = useState(null);
  const [value, setValue] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    const data = { name: value };
    console.log('submit');
    console.log(value);
    fetch('http://127.0.0.1:5000/api/', {
      method: 'POST',
      headers: {
        'Content-type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then(res => res.json())
      .then(res => console.log(res));
  }

  function handleValue(e) {
    setValue(e.target.value);
  }
  return (
    <section id="app">
      <form action="" onSubmit={handleSubmit}>
        <input type="text" onChange={handleValue} />
        <button> submit </button>
      </form>
    </section>
  );
}
render(<App />, document.querySelector('#root'));