Cors 媒体混乱

Posted 2023-03-04

【中文标题】Cors 媒体混乱

【英文标题】：Cors media confusion

【发布时间】：2015-09-08 14:41:21

【问题描述】：

我对 cors 有疑问。

我正在尝试访问由另一台机器提供的网页上的一台服务器上的 mp3。

服务器已设置。 https://gist.github.com/fxsjy/5465353

当我直接访问路径时，一切正常。

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="Content-type, Content-Length,Date,Last-Modified,Server" />
  </customHeaders>
</httpProtocol>

我的 web.config 中有前面的内容，html 中有以下内容。

<audio id="myAudio"
       controls="controls"
       src="http://A IP:A PORT/A File Path/A file.mp3"
       type="audio/mpeg">
    Your user agent does not support the HTML5 Audio element.
</audio>

页面响应头是：

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Microsoft-IIS/8.0
X-AspNetMvc-Version: 5.2
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcc2Vhbi5oYW5zZm9yZFxEcm9wYm94XE11c2ljbzJcTXVzaWNvMlxNdXNpY28yXEhvbWVcVGVzdA==?=
X-Powered-By: ASP.NET
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-type, Content-Length,Date,Last-Modified,Server
Date: Tue, 23 Jun 2015 00:20:11 GMT
Content-Length: 1233

当我将 Mp3 文件放在本地时，当我远程访问它时它可以工作。

MediaElementAudiosource outputs zeroes due to CORS access restrictions for http://A IP:A PORT/A File Path/A file.mp3

作为 chrome 控制台中的错误。 Firefox 加载没有错误，但什么也不做。

对 mp3 的两个请求都返回 200。

响应头是。

HTTP/1.0 200 OK
Server: SimpleHTTP/0.6 Python/2.7.9
Date: Tue, 23 Jun 2015 00:20:12 GMT
Content-type: audio/mpeg
Content-Length: 2882414
Last-Modified: Mon, 07 Feb 2011 10:31:23 GMT

谁能看到我做错了什么:(？

【参考方案1】：

所以不要问我为什么，但是在我的音频标签中添加 crossorigin="anonymous" 可以解决问题...

        <audio id="myAudio"
               controls="controls"
               src="TUNE.mp3"
               type="audio/mpeg"
               crossorigin="anonymous">

见https://bugzilla.mozilla.org/show_bug.cgi?id=937718

我还必须添加到服务器响应中。

【讨论】：

有关crossorigin属性的更多信息：developer.mozilla.org/en-US/docs/Web/HTML/…（很奇怪，除了标题之外还需要它）