Flask+JS进度条不更新：无法获取Python端进度数据

针对你遇到的进度条无更新问题，结合你确认后端数值已更新的前提，从JavaScript及前后端交互角度排查如下：

1. 跨域请求限制 #

如果你的前端页面不是从http://127.0.0.1:5000域名/端口加载的（比如本地直接打开HTML文件、或前端运行在其他端口），浏览器的跨域策略会阻止fetch请求，导致进度数据无法获取。

排查方式：打开浏览器开发者工具（F12）的「Console」面板，查看是否有CORS相关报错；再切换到「Network」面板，检查/progress请求的状态码是否为403或报错。

修复方案：给Flask添加跨域支持：

# 先安装依赖：pip install flask-cors
from flask_cors import CORS
app = Flask(__name__)
CORS(app)  # 生产环境可指定允许的域名，比如CORS(app, resources={r"/progress": {"origins": "http://your-frontend-domain"}})

2. CSS变量未绑定进度条样式 #

你的JavaScript通过设置--width变量更新进度，但如果CSS中没有将该变量关联到进度条的视觉样式，即使变量更新也不会有UI变化。

检查并修复CSS：确保进度条元素的样式正确使用--width变量，示例：

#progress-bar {
  width: 100%;
  height: 24px;
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}
#progress-bar .fill {
  height: 100%;
  width: var(--width, 0%);
  background-color: #2196F3;
  transition: width 0.3s ease;
}

同时确保HTML结构对应：

<div id="progress-bar">
  <div class="fill"></div>
</div>

3. JavaScript代码未正确处理数据或元素 #

可以在代码中添加日志，确认数据接收和元素获取是否正常：

function updateProgressBar(progress) {
    console.log('当前进度值：', progress); // 确认是否拿到正确数值
    var progressBar = document.getElementById('progress-bar');
    if (!progressBar) {
        console.error('未找到进度条元素！');
        return;
    }
    progressBar.style.setProperty('--width', progress * 100 + '%');
}

function checkProgress() {
    fetch('http://127.0.0.1:5000/progress')
      .then(response => {
          console.log('请求响应状态：', response.status);
          return response.json();
      })
      .then(data => {
          console.log('后端返回数据：', data);
          updateProgressBar(data.progress);
          setTimeout(checkProgress, 1000);
      })
      .catch(error => console.error('请求失败：', error));
}

通过控制台日志，可快速定位是请求失败、数据格式错误，还是元素未找到的问题。

4. Flask主线程被阻塞 #

如果你的图片处理逻辑是同步执行的，Flask默认的单线程会被长时间占用，导致/progress请求无法及时响应，直到图片处理完成才会返回最新进度值。

修复方案：将图片处理放到后台线程执行：

from threading import Thread

def handle_image_processing(image):
    # 模拟图片处理步骤，逐步更新进度
    update_progress(0.25)
    # 执行图片处理操作1
    update_progress(0.5)
    # 执行图片处理操作2
    update_progress(0.75)
    # 执行图片处理操作3
    update_progress(1.0)

@app.route('/upload', methods=['POST'])
def upload_image():
    image = request.files.get('image')
    # 启动后台线程处理图片，不阻塞主线程
    Thread(target=handle_image_processing, args=(image,)).start()
    return {'status': 'processing'}

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