React前端请求本地Flask后端遭拒绝：问题排查与方案咨询

核心问题分析 #

1. 端口不匹配：前端请求目标是5000端口（http://127.0.0.1:5000/predict），但你的Flask后端实际运行在3000端口，导致目标端口无服务响应，触发ERR_CONNECTION_REFUSED错误。
2. 跨域资源共享（CORS）限制：即使端口修正，前后端运行在不同端口/协议下时，浏览器同源策略会拦截跨域请求，导致请求失败。
3. 未定义$SCRIPT_ROOT变量：前端代码中使用$SCRIPT_ROOT + "predict"拼接请求地址，但该变量未被声明，可能导致请求路径错误。

解决方案 #

1. 修正请求端口与路径

直接指定正确的后端地址，或提前定义$SCRIPT_ROOT变量：

// 在Chatbox类外部定义后端根地址
const $SCRIPT_ROOT = "http://127.0.0.1:3000/";

class Chatbox {
  // ... 其余代码保持不变
}

也可以直接修改fetch的URL：

fetch("http://127.0.0.1:3000/predict", {
  method: "POST",
  body: JSON.stringify({ message: text1 }),
  mode: "cors",
  headers: {
    "Content-Type": "application/json",
  },
})

2. 配置Flask后端支持CORS

安装flask-cors扩展：

pip install flask-cors

在后端app.py中添加CORS配置：

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

from flask import Flask, render_template, request, jsonify
from flask_cors import CORS  # 导入CORS模块
from chat import get_response

app = Flask(__name__)
CORS(app)  # 全局启用CORS，允许所有跨域请求

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

3. 开发环境可选：React代理配置

如果不想直接暴露后端地址，可以在React项目的package.json中添加代理字段：

{
  "name": "your-react-project",
  "proxy": "http://127.0.0.1:3000",
  // ... 其他项目配置
}

之后前端请求可以简化为：

fetch("/predict", {
  method: "POST",
  body: JSON.stringify({ message: text1 }),
  headers: {
    "Content-Type": "application/json",
  },
})

注意：该方案仅适用于开发环境，生产环境需通过Nginx等工具配置反向代理，或将前后端部署在同一域名下。

验证步骤 #

1. 重启Flask后端，确认服务运行在3000端口。
2. 重启前端服务（或刷新静态页面）。
3. 发送测试消息，检查控制台是否仍有连接错误。

内容的提问来源于stack exchange，提问作者Paris Vanuya