javascript - 音频文件无法从另一个 Docker 容器播放

Question

我正在尝试使用 Flask 和 Docker 开发一个小型音乐应用程序。我的 compose 中有两个 docker 服务，都运行 Flask。

第一个称为 uploader :

@app.route("/get_song/<string:filename>/", methods=["GET"])
def get_song(filename):
    path = os.path.join(flask.current_app.instance_path, flask.current_app.config["UPLOAD_FOLDER"])
    return flask.send_from_directory(path, filename, as_attachment=True)

第二个渲染一个 Jinja 模板，尝试播放此 API 返回的文件:

<audio controls="controls" autoplay="autoplay"></audio>

<a href="javascript:void(0);" onclick="playSong('{{song}}')">{{song}}</a>`

<script type="text/javascript">
    function playSong(song){
        $('audio').attr('src', 'http://uploader:5000/get_song/'+song);
    }
</script>

单独来说，这些组件工作得很好。但一起使用时，该文件无法播放。我几乎尝试了网上找到的所有方法，但似乎都不起作用。任何帮助将不胜感激。谢谢!

编辑:添加了 docker-compose 文件。两个 docker 镜像都是本地构建的。

version: "3"
services:
  uploader:
    image: project_uploader:latest
    ports:
      - "4000:5000"
    networks:
      - upload
  frontend_server:
    image: project_frontend_server:latest
    ports:
      - "5000:5000"
    networks:
      - upload

networks:
  upload:

Answer 1

你展示的HTML片段最终是在浏览器中执行的；但浏览器在 Docker 空间之外运行，并且不知道 Docker 内部主机名。

<!-- browser doesn't know about a host named "uploader" -->
<audio src="http://uploader:5000/get_song/..." />

当您创建此 HTML 片段时，您需要提供运行服务器的主机名称以及其他容器的已发布端口: 号。如果浏览器和容器在同一系统上运行(并且没有使用 Docker Toolbox)，您可以使用 localhost 作为主机名。

$('audio').attr('src', 'http://localhost:4000/get_song/'+song);

处理这个问题最可靠的方法可能是设置一个反向代理，比如 Nginx。浏览器应用程序将指向代理，它会将内容转发到一个容器或另一个容器。如果可以做到这一点，那么您可以使用仅路径 URL，并让主机名与主页相同。

$('audio').attr('src', '/uploader/get_song/'+song);