Блог

Я пытаюсь отправить данные формы из простой формы управления реакцией на мой сервер flask. Похоже, что мой сервер flask получает данные, но я не могу отправить ответ, и я получаю эту ошибку. Я хочу отобразить ответ на моей странице реакции прямо под полем ввода. Это было легко сделать только в flask с помощью return render_template

Пожалуйста, помогите, если можете, если нет, все равно спасибо.

Ошибка:

 Access to XMLHttpRequest at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  

Моя структура каталогов React выглядит следующим образом:

 form
    api/ticker.py

    src
        components/Form.js
        app.js
   
  

Это мой package.json:

 {
  "name": "form-handling-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.20.0",
    "cors": "^2.8.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:5000"
}
  

Мое приложение Flask выглядит так:

 from flask import Flask, request, render_template, jsonify, json
from flask_cors import CORS, cross_origin

app = Flask(__name__)

CORS(app, support_credentials=True)


@app.route("/", methods=['POST'])
@cross_origin(supports_credentials=True)
def contracts():

    react_form_data = request.get_json()

    ticker = react_form_data['ticker']

    return ticker


if __name__ == "__main__":
    app.run(debug=True)
  

Это component/Form.js файл:

 import React, { Component } from "react";
import axios from "axios";

class Form extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ticker: "",
    };
  }

  handleTickerChange = (event) => {
    this.setState({
      ticker: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
    axios
      .post("http://127.0.0.1:5000", this.state)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>Ticker </label>
          <input
            type="text"
            name="ticker"
            value={this.state.ticker}
            onChange={this.handleTickerChange}
          />
          <button type="submit">Submit</button>
        </div>
      </form>
      {ticker}
    );
  }
}

export default Form;
  

Вам необходимо установить обработчик CORS в Flask, чтобы предоставить правильные заголовки обратно в браузер.

Установите flask-cors и следуйте документации.