React axios ПОЛУЧИТЬ нулевые данные из бэкэнда Flask

Question

У меня есть форма реакции в веб-интерфейсе, где пользователи могут задать вопрос, который они хотят задать. Отправьте данные формы на флеш-сервер, используя некоторые модели НЛП для вычисления и получения результата. Затем верните результат во внешний интерфейс.

Проблема заключается в том, что я вижу данные, отправленные на флеш-сервер, но получаю нулевое значение, когда пытаюсь получить результаты от флеш-сервера.

ВотМетод handleSubmit в QuestionForm.js во внешнем интерфейсе:

// post data to flask
axios.post('http://localhost:5000/api/newquestion', this.state)
.then(response => {
    console.log(response)
})
.catch(error => {
    console.log(error)
})

Метод componentDidMount () в QuestionResult.js:

class QuestionResult extends Component {
    constructor() {
        super();
        this.state = {
            questionResult: ''
        }
    }

    componentDidMount() {
        axios.post('http://localhost:5000/api/newquestion')
        .then(response => {
            console.log(response)
            this.setState({questionResult: response.data})
        })
        .catch(error => {
            console.log(error);
        })
    }

    render() {
        const {questionResult} = this.state

        return (
            <div>
                <h1>{questionResult}</h1>
            </div>
        )
    }
}

Конечная точка колбы (это всего лишь тестовая модель, и я пытаюсь вернуть сам вопрос прямо сейчас):

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/api/newquestion", methods=['GET', 'POST'])
def get_user_question():
    if request.method == 'POST':
        user_question = request.get_json()
        print(user_question)
    return jsonify(user_question)

app.run(port=5000, debug=True)

Вот что я получаю из консоли python:

127.0.0.1 - - [20/Nov/2019 23:01:12] "OPTIONS /api/newquestion HTTP/1.1" 200 -
None
127.0.0.1 - - [20/Nov/2019 23:01:12] "GET /api/newquestion HTTP/1.1" 200 -
{'question': 'aaaa'}
127.0.0.1 - - [20/Nov/2019 23:01:13] "POST /api/newquestion HTTP/1.1" 200

Однако, когда я импортирую другую функцию test.py:

def hello():
    return "hi there!"

И изменил конечную точку на:

@app.route("/api/newquestion", methods=['GET', 'POST'])
def get_user_question():
    return hello()

Я вижу сообщение "Привет!"успешно отображается на моей странице реакции.

Answer 1

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

В вашем случае означает, что ваше приложение реагировать не может связаться с сервером флеш-памяти, работающим на другом порту, но вы можете внести некоторые изменения в конфигурацию фляги для разрешения запросов между источниками. Для этого есть несколько пакетов, например https://enable -cors.org / server_flask.html

Answer 2

const config = {
            headers: {'Access-Control-Allow-Origin': '*'}
        };

        axios.post('http://localhost:5000/api/newquestion', this.state, config)
        .then(response => {
            console.log(response)
            this.setState({questionResult: response.data,            isLoaded: true})
        })
        .catch(error => {
            console.log(error)
        })

@app.route("/api/newquestion", methods=['POST'])
@cross_origin(origin='*',headers=['Content-Type'])
def get_user_question():
    data = request.get_json()
    question = data['question']
    result = generate_text(question)
    return jsonify(result)