Flask API在ThunderClient正常，前端调用部分场景触发浏览器刷新问题

问题分析 #

目前的核心现象是：前端调用API时，快速返回的错误场景（如无文件、格式无效）能正常处理，但耗时较长的场景（成功转录或返回"Number not found!"）会触发浏览器刷新，导致结果无法展示。

根本原因是表单默认提交行为未被阻止：当通过表单内的提交按钮触发上传操作时，浏览器会默认执行表单提交并刷新页面。快速返回的错误响应在页面刷新前完成了DOM更新，而耗时较长的请求（比如调用OpenAI接口的场景）还未处理完，页面就已经刷新，因此看不到最终结果。

同时前端代码存在两个细节错误：

• fetch配置里的header拼写错误，应为headers；
• 手动设置Content-Type: multipart/form-data会丢失浏览器自动生成的boundary参数，可能导致后端解析表单数据异常。

解决方案 #

1. 阻止表单默认提交行为 #

如果上传操作通过表单的submit事件触发，必须在事件处理函数中调用event.preventDefault()来阻止页面刷新：

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', async (e) => {
  // 关键：阻止表单默认提交行为，避免页面刷新
  e.preventDefault();

  const file = document.querySelector('input[type="file"]').files[0];
  if (!file) {
    document.querySelector('#result').innerHTML = '<p class="fs-1"><strong>Error:</strong> No selected file</p>';
    return;
  }

  const formData = new FormData();
  formData.append('file', file);

  const URL = "http://localhost:5000";

  try {
    const response = await fetch(URL, {
      method: "POST",
      body: formData
      // 移除手动设置的Content-Type，浏览器会自动添加正确的multipart/form-data及boundary
    });

    const data = await response.json();

    const html = data.error
      ? `<p class="fs-1"><strong>Error:</strong> ${data.error}</p>`
      : `<p class="fs-1"><strong>Result:</strong> ${data.text}</p>`;

    document.querySelector('#result').innerHTML = html;
  } catch (error) {
    console.error('请求失败:', error);
    document.querySelector('#result').innerHTML = '<p class="fs-1"><strong>Error:</strong> Request failed</p>';
  }
});

如果是通过普通按钮触发上传，需确保按钮的type属性为button，避免触发表单提交：

<button type="button" onclick="handleUpload()">上传音频</button>

2. 优化后端代码（可选） #

openai.Audio.transcribe返回的已经是可直接访问的对象，无需转成字符串再解析，可简化transcript_number函数：

def transcript_number(filename):
    filepath = os.path.join(UPLOAD_FOLDER, filename)
    with open(filepath, 'rb') as audiofile:
        transcript = openai.Audio.transcribe("whisper-1", audiofile)
    text = transcript['text']
    
    try:
        float(text)
        return transcript
    except ValueError:
        print('erro')
        return { 'error': 'Number not found!' }

同时可以在后端添加日志，验证响应是否正常返回：

return jsonify(transcripted_number)
# 之前添加日志：
print('返回响应内容:', transcripted_number)

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