配置必要CORS Headers后Icecast仍出现跨域请求失败问题

问题现象 #

运行Icecast服务器后，不同主机的JavaScript客户端无法正常连接，浏览器始终抛出如下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com:8000/live. (Reason: CORS request did not succeed). Status code: (null).

使用wget、curl等非浏览器工具访问服务器一切正常，仅浏览器端存在跨域限制问题。

当前Icecast配置 #

<http-headers>
    <header name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
    <header name="Access-Control-Allow-Origin" value="*" />
    <header name="Access-Control-Allow-Methods" value="GET POST PUT DELETE" />
</http-headers>

curl返回的响应头 #

< Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET POST PUT DELETE

即使移除Access-Control-Allow-Headers和Access-Control-Allow-Methods配置，问题仍未解决。原本认为仅配置Access-Control-Allow-Origin: *即可满足跨域要求，但实际无效。

浏览器OPTIONS预检请求详情 #

通过DevTools网络面板发现，失败的预检请求（OPTIONS）信息如下：

OPTIONS /live undefined
Host: radio.example.com:8000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: icy-metadata
Referer: http://radio.example.com/
Origin: http://radio.example.com
DNT: 1
Connection: keep-alive
Sec-GPC: 1

解决方法 #

问题核心在于浏览器发送的OPTIONS预检请求携带了icy-metadata请求头，但当前配置的Access-Control-Allow-Headers未包含该字段，导致预检失败。

修改Icecast配置如下：

<http-headers>
    <header name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, icy-metadata" />
    <header name="Access-Control-Allow-Origin" value="*" />
    <header name="Access-Control-Allow-Methods" value="GET POST PUT DELETE OPTIONS" />
</http-headers>

• 在Access-Control-Allow-Headers中新增icy-metadata，匹配浏览器请求头
• 在Access-Control-Allow-Methods中加入OPTIONS方法，确保预检请求被允许

同时需确认：

1. Icecast服务器版本是否支持处理OPTIONS请求，部分旧版本可能需要额外配置
2. 服务器防火墙或反向代理是否拦截了OPTIONS请求

内容的提问来源于stack exchange，提问作者Halfstop