咨询Web API返回音频文件时接口被调用两次的原因

我来帮你梳理下这种接口被重复调用的常见场景和解决思路，毕竟我之前也碰到过类似的坑：

一、音频播放导致Action两次调用 #

1. 浏览器的预请求/资源探测 #

很多现代浏览器会先发送一个HEAD请求来探测资源的大小、类型等信息，之后再发送GET请求获取实际内容。如果你的Action没有区分HEAD和GET方法，就会被触发两次。

• 解决办法：
  • 在Action上明确指定只接受GET请求：

    [HttpGet]
    public IActionResult PlayAudio()
    {
        // 你的音频返回逻辑
    }
    

  • 或者处理HEAD请求，只返回响应头不返回内容：

    [AcceptVerbs("GET", "HEAD")]
    public IActionResult PlayAudio()
    {
        if (Request.Method == "HEAD")
        {
            // 设置Content-Type、Content-Length等响应头
            Response.Headers.ContentType = "audio/mpeg";
            Response.Headers.ContentLength = 你的音频文件大小;
            return Ok();
        }
        // 处理GET请求返回音频内容
        var stream = new FileStream("audio.mp3", FileMode.Open);
        return File(stream, "audio/mpeg");
    }
    

2. 音频播放器的自动重试 #

有些前端音频播放器（比如<audio>标签）在第一次请求没有拿到完整响应或者响应头不规范时，会自动发起第二次请求。比如你没有正确设置Content-Length，播放器可能认为请求失败而重试。

• 解决办法：
  • 确保返回响应时正确设置Content-Type和Content-Length；
  • 如果是流式返回，确认播放器是否支持流式响应，或者改用完整文件返回。

二、Url.Link生成的上传URL被调用两次的情况 #

1. 前端的意外重复请求 #

可能是前端代码中不小心绑定了两次事件（比如点击事件绑定了两次），或者框架的自动重试机制（比如Axios的默认重试）。

• 解决办法：
  • 检查前端代码，确认请求只发送了一次；
  • 如果是使用HTTP客户端库，查看是否开启了自动重试，必要时关闭。

2. OPTIONS预请求（CORS场景） #

如果你的API和前端页面不在同一个域名下，浏览器会先发送一个OPTIONS请求来确认跨域权限，之后才会发送实际的上传请求（比如POST）。如果你的上传Action没有处理OPTIONS，或者你没正确配置CORS，可能会被误判为两次调用。

• 解决办法：
  • 在Startup/Program.cs中正确配置CORS策略，允许对应的Origin和HTTP方法：

    builder.Services.AddCors(options =>
    {
        options.AddPolicy("AllowFrontend",
            policy => policy.WithOrigins("http://你的前端域名")
                            .AllowAnyMethod()
                            .AllowAnyHeader());
    });
    app.UseCors("AllowFrontend");
    

  • 确保上传Action接受对应的HTTP方法（比如[HttpPost]），CORS配置会自动处理OPTIONS请求。

3. 浏览器缓存或刷新机制 #

有时候浏览器会因为缓存问题或者页面刷新时的重复请求导致接口被调用两次，可以尝试在请求URL后加随机参数（比如?t=时间戳）来避免缓存影响。

排查小技巧 #

• 打开浏览器的开发者工具（F12），切换到Network标签，查看所有请求的方法（GET/HEAD/OPTIONS/POST）、状态码和发起者，这样就能明确是哪种原因导致的两次调用；
• 在Action中添加日志，记录每次请求的Method、RequestId等信息，方便定位问题。

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