Flask跨端口连接前后端报错：连接拒绝与CORS配置问题

一、ERR_CONNECTION_REFUSED 错误原因及修复 #

核心原因 #

后端Flask服务运行在3000端口（代码中app.run(debug=True, port=3000)），但前端请求的是http://127.0.0.1:5000/predict，端口不匹配导致连接被拒绝。另外前端代码中的$SCRIPT_ROOT变量如果未正确注入，也会导致请求地址错误。

修复方案 #

1. 统一端口配置

   • 要么修改后端端口为5000：

     if __name__ == "__main__":
         app.run(debug=True, port=5000)  # 改为5000端口
     

   • 要么修改前端请求地址为3000端口：
     直接修改fetch的URL：

     fetch("http://127.0.0.1:3000/predict", {
       // 其他配置不变
     })
     

2. 正确注入$SCRIPT_ROOT（推荐）
   在Flask的base.html模板中添加以下代码，动态注入后端根路径：

   <script>
       var $SCRIPT_ROOT = {{ request.script_root|tojson }};
   </script>
   

   这样前端的fetch($SCRIPT_ROOT + "predict")就能自动匹配后端的实际地址，避免硬编码端口。

二、Import "flask_cors" could not be resolved from source 错误修复 #

核心原因 #

flask-cors包未安装，或者安装的Python环境与运行Flask的环境不一致。

修复方案 #

1. 确认当前Python环境
   查看app.py开头打印的Python Interpreter Path，比如输出为/home/user/venv/bin/python（虚拟环境）或/usr/bin/python3（全局环境）。

2. 安装flask-cors
   使用对应环境的pip命令安装：

   • 虚拟环境（已激活）：

     pip install flask-cors
     

   • 全局环境：

     python3 -m pip install flask-cors
     

三、Flask CORS正确配置方式 #

基础全局配置（开发阶段） #

安装flask-cors后，在app.py中全局启用CORS，允许所有跨域请求：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 全局允许跨域

严格域名限制（生产阶段） #

如果需要限制仅特定前端域名能访问，可指定origins参数：

CORS(app, origins=["http://localhost:8080"])  # 替换为你的前端端口/域名

额外检查项 #

• 确保后端服务已正常启动，无报错崩溃。
• 本地防火墙未拦截127.0.0.1的端口请求。
• 前端请求的Content-Type: application/json头配置正确，后端request.get_json()能正常解析请求体。

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