Flask后端音频接口Postman可用，HTML-JS调用失败求助

我用Flask搭建后端，前端采用HTML+JavaScript实现功能。通过Postman或Insomnia发送POST请求能正常获取音频文件并播放，但在HTML-JS中调用接口却无法正常加载音频。

后端Flask代码 #

@app.route('/g-media', methods=['POST'])
def get_media():
    file = request.get_json()['id']
    dict_data = get_media_path(file)
    return send_file(dict_data['path'], mimetype="audio/wav", as_attachment=True)

前端JavaScript代码（原代码未完成后续逻辑） #

async function get_selected_detail(audio_id) {
    var url = 'http://127.0.0.1:5000/g-media';
    var data = JSON.stringify({"id": audio_id});
    var header = {
        'Content-Type': 'application/json',
    }
    let result = await axios.post(url, data, { headers: header }).then(res => {
    console.log(typeof(res.data))
    // 缺少音频数据处理逻辑
    })
}

前端HTML代码 #

<audio controls>
    <source type="audio/mpeg" id="audio-source">
</audio>

问题原因分析 #

• as_attachment=True触发下载而非播放：Flask的send_file设置该参数后，响应头会带上Content-Disposition: attachment，浏览器会自动触发文件下载，而非让<audio>标签直接解析音频内容。Postman能识别并播放附件，但前端媒体标签无法处理这种响应。
• 响应数据解析错误：axios默认会把响应解析为JSON或文本，导致音频二进制数据被损坏，无法被<audio>标签识别。
• MIME类型不匹配：后端返回audio/wav格式，但HTML中<source>的type设为audio/mpeg（MP3格式），类型不匹配导致无法加载。

解决步骤 #

1. 修改Flask后端，移除下载强制设置 #

去掉as_attachment=True（默认值为False，可直接省略），让响应返回可被媒体标签解析的内容：

@app.route('/g-media', methods=['POST'])
def get_media():
    file = request.get_json()['id']
    dict_data = get_media_path(file)
    return send_file(dict_data['path'], mimetype="audio/wav")

2. 前端axios请求指定响应类型为Blob #

告诉axios以二进制Blob格式接收响应，再将Blob转换为Object URL赋值给音频标签：

async function get_selected_detail(audio_id) {
    var url = 'http://127.0.0.1:5000/g-media';
    var data = {"id": audio_id}; // axios会自动序列化JSON，无需手动stringify
    let res = await axios.post(url, data, {
        headers: { 'Content-Type': 'application/json' },
        responseType: 'blob' // 关键：指定响应为二进制Blob
    });
    
    // 生成音频URL并绑定到标签
    const audioBlob = new Blob([res.data], { type: 'audio/wav' });
    const audioUrl = URL.createObjectURL(audioBlob);
    const audioSource = document.getElementById('audio-source');
    
    audioSource.src = audioUrl;
    audioSource.type = 'audio/wav'; // 匹配后端返回的MIME类型
    document.querySelector('audio').load(); // 触发音频重新加载
}

3. 修正HTML中<source>的MIME类型 #

将type改为与后端一致的audio/wav：

<audio controls>
    <source type="audio/wav" id="audio-source">
</audio>

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