我正面临着一个奇迹，我想知道是否有人理解这里发生了什么。下面的代码在我的Vite/Vue 3应用程序中显示了一个“播放”按钮，我观察到这种不一致的行为：
在我的开发机器上运行时（后端+前端在同一台服务器上）

• 笔记本电脑：Chrome可以播放音乐
• 笔记本电脑：Safari可以播放音乐
• 在iPhone上：Chrome可以播放音乐
• 在iPhone上：Safari可以播放音乐

在我的生产机器上运行时（后端+前端在同一台服务器上，在Docker容器中）

• 笔记本电脑：Chrome可以播放音乐
• 在笔记本电脑上：Safari无法播放音乐，并向控制台发出以下错误消息
• 在iPhone上：Chrome和Safari都不能播放

查询在完全相同的时间打开完全相同的页面，后端肯定是启动和运行的。
在Prod上，笔记本电脑上的Safari、PROD中iPhone上的Safari + Chrome将在UI上显示以下消息：
不支持该操作。
我的直觉是，我在PROD / nginx中的服务器设置有缺陷，Chrome比Safari更宽容我，因此可以工作，而Safari失败了。
我无法理解错误消息，并将感谢任何指针，帮助我解决这个问题。
感谢大家的时间。
PS：nginx中的socket.io位可能不相关，但我还是粘贴了它，所以它显示了完整的配置。m4a文件是通过REST API提供的，而不是通过socket.io
PS2：后端是一个gunicorn / flask服务器，如果这对分析有帮助，很乐意粘贴细节
PS3：当我在上面写“DEV”时，我指的是使用“yarn vite”运行的UI，而不是在构建它（yarn build）之后为它提供服务的nginx;我通过docker容器来完成。

Vue组件：

<template>
  <div v-for="index in 1" :key="index" >
    <audio-player
      preload="none"  
      :audio-list="['./api/soundfiles?path=/&filename=test-sound.m4a']"
      :show-prev-button="false" :show-next-button="false"  :show-volume-button="false" :show-playback-rate="false" :show-play-loading="false"
      @error="handleAudioError"
    /> 
  </div>
</template>

<script lang="ts">
  // @ts-ignore
  import AudioPlayer from '@liripeng/vue-audio-player' 
  export default {
    methods: { 
      handleAudioError(error: any) {
        console.error(error);
          // Check the error code
        if (error.target.error) {
          console.error('Error code:', error.target.error.code);
        }
      },
    }
  };
</script>

字符串

nginx配置：

server {
    listen 7331;
    root   /app/nginx/static;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Origin "";
    }

    location /socket.io {
        proxy_pass http://localhost:5000;
        proxy_set_header Origin "";
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;

        # Specific WebSocket configurations
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

型

Safari（内置）错误

[Error] Event {isTrusted: true, _vts: 1703011892384, type: "error", target: <audio class="audio-player__audio">, currentTarget: <audio class="audio-player__audio">, …}
    handleAudioError (test3-jSNTJD8p.js:1:144)
    handleAudioError
    mt (index-6Y2yy0e4.js:1:12821)
    $e (index-6Y2yy0e4.js:1:12900)
    n (index-6Y2yy0e4.js:1:59953)

[Error] Error code: – 4
    handleAudioError (test3-jSNTJD8p.js:1:177)
    handleAudioError
    mt (index-6Y2yy0e4.js:1:12821)
    $e (index-6Y2yy0e4.js:1:12900)
    n (index-6Y2yy0e4.js:1:59953)

型