Question

我有一个奇怪的问题，ngnix作为反向代理打破了HTML DOM play（）方法。我在一个Docker容器中运行nginx作为几个Web应用程序的代理和一个在各个Docker容器中运行的节点api。

如果访问使用HTML play（）通过nginx代理的网络应用，声音不会播放，我会得到一个

未捕获（在promise中）DOMException：该元素没有受支持的源。

浏览器中出现

错误。这是Chrome，但我在Safari中也有类似内容。

当我在应用程序容器上公开端口8080并直接访问页面时，声音播放，没有问题。更令人困惑的是，有四种不同的play（）语句，一种是有效的，而其他的则没有。

为了测试，我创建了一个非常简化的网页，以确保没有其他因素导致此问题：

<button onclick="playRed()">Red</button>
<button onclick="playGreen()">Green</button>

<script>
  var soundGreen = new Audio("./sound/Ding.mp3");
  var soundRed = new Audio("./sound/Ding-ding-ding-sound.mp3");

  function playRed() {
    soundRed.play();
  }

 function playGreen() {
   soundGreen.play();
 }
</script>

网络应用程序以http：2.4-alpine图像运行。

我使用nginx：1.13官方图片和以下default.conf：

server {

listen 80 default_server;

location / {
    proxy_pass         http://web/;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;

 }

location /vnode {
    proxy_pass         http://vnode/;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;

 }

location /api {

    proxy_pass         http://api:3000/api;
    proxy_redirect     off;
    proxy_set_header   Host $host;
    proxy_set_header   X-Real-IP $remote_addr;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Host $server_name;

 }
}

突破的应用程序位于/vnode路径上。

Answer 1

在问题上睡觉后，我意识到这个问题是由一条糟糕的道路造成的。由于这并未设置为虚拟服务器，因此所有资产都必须完全按照以下方式进行修改。

var soundGreen = new Audio("vnode/sound/Ding.mp3");
var soundRed = new Audio("vnode/sound/Ding-ding-ding-sound.mp3");

使问题不清楚的原因是，即使文件无法访问，也没有生成404错误。

我仍然不明白一种声音是如何起作用的，但是当我进行更多实验时它也停止了工作。对那个问题不是一个好的答案，但它现在有效。

NGNIX代理打破HTML播放（）

1 个答案: