音频文件未从另一个 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 片段时，您需要提供运行服务器的主机的名称以及其他容器的已发布 ports: 编号。如果浏览器和容器在同一个系统上运行（并且没有使用 Docker Toolbox），您可以使用 localhost 作为主机名。

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

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

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