在 React 前端中从本地主机获取数据的问题

Question

我正在为我的网站构建一个聊天机器人，在尝试从 React 前端向 Flask 后端发送 POST 请求时遇到了问题。这是我的设置的细分：

前端（反应）：

我有一个名为 Chatbox 的 React 组件，用于处理用户交互并显示聊天消息。 当用户发送消息时，我尝试向 Flask 后端上的 http://127.0.0.1:5000/predict 发出 POST 请求。 但是，我在浏览器控制台中遇到以下错误：

POST http://127.0.0.1:5000/predict net::ERR_CONNECTION_REFUSED

这是我的 app.js 前端代码：

class Chatbox {
  constructor() {
    this.args = {
      openButton: document.querySelector(".chatbox__button"),
      sendButton: document.querySelector(".send__button"),
    };

    this.state = false;
    this.messages = [];
  }

  toggleState(chatBox) {
    chatBox.classList.toggle("chatbox--active");
  }

  onSendButton(chatBox) {
    var textField = chatBox.querySelector("input");
    let text1 = textField.value;
    if (text1 === "") {
      return;
    }

    let msg1 = { name: "User", message: text1 };
    this.messages.push(msg1);

    fetch($SCRIPT_ROOT + "predict", {
      method: "POST",
      body: JSON.stringify({ message: text1 }),
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((r) => r.json())
      .then((r) => {
        let msg2 = { name: "Sam", message: r.answer };
        this.messages.push(msg2);
        this.updateChatText(chatBox);
        textField.value = "";
      })
      .catch((error) => {
        console.error("Error:", error);
        this.updateChatText(chatBox);
        textField.value = "";
      });
  }

  updateChatText(chatBox) {
    var html = "";
    this.messages
      .slice()
      .reverse()
      .forEach(function (item, index) {
        if (item.name === "Sam") {
          html +=
            '<div class="messages__item messages__item--visitor">' +
            item.message +
            "</div>";
        } else {
          html +=
            '<div class="messages__item messages__item--operator">' +
            item.message +
            "</div>";
        }
      });

    const chatMessage = chatBox.querySelector(".chatbox__messages");
    chatMessage.innerHTML = html;
  }

  display() {
    const { openButton, sendButton } = this.args;
    const chatBox = 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) => {
      if (event.key === "Enter") {
        this.onSendButton(chatBox);
      }
    });
  }
}

const chatbox = new Chatbox();
chatbox.display();

后端（Flask）：

我的 Flask 后端在端口 3000 上运行。 我为 /predict 定义了一个路由，它应该处理 POST 请求并返回 JSON 响应。 这是我的后端（app.py）代码：

import sys
print("Python Interpreter Path:", sys.executable)

from flask import Flask, render_template, request, jsonify
from chat import get_response

app = Flask(__name__)



@app.route("/", methods=['GET'])
def index_get():
    return render_template("base.html")

@app.route("/predict", methods=['POST'])
def predict():
    text = request.get_json().get("message")
    # TO-DO: check if text is valid
    response = get_response(text)
    message = {"answer": response}
    return jsonify(message)

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

我想知道为什么我会收到我的问题？我正在考虑设置反向代理来解决该问题，但请告诉我是否应该做其他事情。谢谢。

Answer 1

假设您使用

npm start

运行 React 应用程序并且没有定义其他端口，则您的 React 应用程序正在端口 3000 上运行。

在你的烧瓶代码中，你将端口设置为 3000，我相信你应该得到一个错误，因为该端口已经在使用中。

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

将其更改为

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

所以 Flask 在端口 5000 运行，就像你在问题开始时所说的那样。然后一切都应该正常。