Проблема с получением данных с локального хоста в React Frontend ⇐ Python

[Гость]

Я работаю над созданием чат-бота для своего веб-сайта и столкнулся с проблемой при попытке отправить запрос POST из моего интерфейса React в мой сервер Flask. Вот разбивка моей установки:

Фронтенд (React):

У меня есть компонент React под названием Chatbox, который обрабатывает взаимодействие с пользователем и отображает сообщения чата. Когда пользователь отправляет сообщение, я пытаюсь отправить запрос POST на http://127.0.0.1:5000/predict на своем бэкэнде Flask. Однако в консоли браузера я обнаружил следующую ошибку:

POST http://127.0.0.1:5000/predict net::ERR_CONNECTION_REFUSED вот мой внешний код app.js:

класс Chatbox { конструктор() { this.args = { openButton: document.querySelector(".chatbox__button"), sendButton: document.querySelector(".send__button"), }; this.state = ложь; this.messages = []; } toggleState(chatBox) { ChatBox.classList.toggle("Чатбокс--активен"); } onSendButton (chatBox) { var textField =chatBox.querySelector("input"); пусть text1 = textField.value; если (текст1 === "") { возвращаться; } let msg1 = { name: «Пользователь», сообщение: text1 }; this.messages.push(msg1); fetch($SCRIPT_ROOT + "прогнозировать", { метод: «ПОСТ», тело: JSON.stringify({ message: text1 }), режим: «корс», заголовки: { «Тип контента»: «приложение/json», }, }) .then((r) => r.json()) .then((r) => { let msg2 = { name: "Сэм", сообщение: r.answer }; this.messages.push(msg2); this.updateChatText(chatBox); textField.value = ""; }) .catch((ошибка) => { console.error("Ошибка:", ошибка); this.updateChatText(chatBox); textField.value = ""; }); } updateChatText(chatBox) { вар HTML = ""; это.сообщения .кусочек() .обеспечить регресс() .forEach(функция (элемент, индекс) { if (item.name === "Сэм") { html += '' + элемент.сообщение + ""; } еще { html += '' + элемент.сообщение + ""; } }); constchatMessage =chatBox.querySelector(".chatbox__messages"); чатMessage.innerHTML = html; } отображать() { const { openButton, sendButton } = this.args; constchatBox = document.querySelector(".chatbox__support"); openButton.addEventListener("click", () => this.toggleState(chatBox)); sendButton.addEventListener("click", () => this.onSendButton(chatBox)); const inputNode =chatBox.querySelector("input"); inputNode.addEventListener("keyup", (event) => { если (event.key === "Ввод") { this.onSendButton(chatBox); } }); } } const чат = новый чат (); чатбокс.дисплей(); Бэкэнд (Flask):

Мой сервер Flask работает на порту 3000. У меня есть маршрут, определенный для /predict, который должен обрабатывать запросы POST и возвращать ответ JSON. Вот мой внутренний код (app.py):

импортировать систему print("Путь интерпретатора Python:", sys.executable) из фляги импорта Flask, render_template, request, jsonify из чата импортировать get_response приложение = Колба(__name__) @app.route("/", методы=['GET']) защита index_get(): вернуть render_template("base.html") @app.route("/predict", методы=['POST']) защита предсказать(): текст = request.get_json().get("сообщение") # TO-DO: проверьте корректность текста ответ = get_response(текст) сообщение = {"ответ": ответ} вернуть jsonify (сообщение) если __name__ == "__main__": app.run(debug=True, порт=3000) Мне интересно, почему я получаю сообщение об ошибке? Я подумываю о настройке обратного прокси-сервера, чтобы решить эту проблему, но дайте мне знать, если вместо этого мне следует сделать что-то еще. Спасибо.