使用FormData发送POST Fetch请求时页面两次刷新的原因排查

问题场景 #

• 使用FormData作为请求体发送POST Fetch请求到Flask服务器（后端返回PDF文件），页面会触发两次刷新：一次在发送数据时，一次在收到响应时。
• 不使用FormData或未选择文件时，页面不会刷新；即使改用onclick绑定事件替代事件监听，问题依然存在。
• 排查后确认是Live Server在选择文件并发送请求时触发了页面刷新。

根因分析 #

Live Server的核心逻辑是监听项目目录下的文件变更（创建、修改、删除），一旦检测到变化就自动刷新页面。当你通过FormData上传文件时，大概率是以下情况触发了监听：

• Flask处理上传时，把文件暂存到了项目目录内，被Live Server识别为文件变化。
• 浏览器或调试工具在上传过程中生成的临时缓存文件，被Live Server误判为项目文件修改。

可行解决方案 #

• 修改Live Server的监听排除规则
  在VS Code设置里配置Live Server: Ignore Files，把上传临时文件所在的目录或临时文件后缀加入排除列表：
  操作路径：VS Code菜单栏 → 文件 → 首选项 → 设置 → 搜索Live Server: Ignore Files → 编辑settings.json，示例配置：

  "liveServer.settings.ignoreFiles": [
      "**/node_modules/**",
      "**/.git/**",
      "**/uploads/**",
      "**/*.tmp"
  ]
  

• 把上传临时文件存到项目目录外
  修改Flask后端代码，将上传文件的临时存储路径指向系统临时目录或项目外的其他位置，避免Live Server监听：

  import os
  from flask import Flask, request
  
  app = Flask(__name__)
  # 用系统临时目录存储上传文件
  UPLOAD_FOLDER = os.path.join(os.environ.get('TEMP'), 'flask_uploads')
  os.makedirs(UPLOAD_FOLDER, exist_ok=True)
  app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
  
  @app.route('/upload', methods=['POST'])
  def upload():
      if 'file' in request.files:
          file = request.files['file']
          file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
          # 后续PDF生成及返回逻辑
          ...
  

• 临时关闭Live Server自动刷新
  调试阶段可以右键点击VS Code状态栏的Live Server图标，选择Stop Live Server，手动刷新页面测试；或者关闭liveServer.settings.fullReload选项，限制仅在修改HTML/CSS/JS时触发刷新。

内容的提问来源于stack exchange，提问作者Pogonyi Ábel Kürt