使用 Flask 连接不同端口上的前端和后端时出错

Question

描述：

我一直在开发一个涉及前端和后端组件的项目，两者都在不同的端口上运行。但是，我在尝试连接它们时遇到错误。具体来说，当我为聊天机器人输入消息时，我在浏览器的开发人员控制台中收到以下错误消息：

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

我尝试通过导入flask_cors来解决此问题，但出现错误：

Import "flask_cors" could not be resolved from source

这是我的前端（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();

这是我的后端的片段（app.py）：

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

from flask import Flask, render_template, request, jsonify
from chat import get_response
from flask_cors import CORS  # Import CORS from flask_cors

app = Flask(__name__)

# Configure CORS for the entire app
CORS(app)

@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)

任何人都可以帮助我确定导致“ERR_CONNECTION_REFUSED”错误的原因以及如何在我的 Flask 应用程序中正确设置 CORS？

感谢您的协助！

Answer 1

我不认为这是 CORS 的问题。您的后端位于

http://localhost:3000

，我假设

SCRIPT_ROOT 

没有指定后端的地址。 （例如，如果您获取

/api/something

，浏览器会将请求发送到

http://[The page's route]/api/something

。尝试使用反向代理。