调用阿里云对象存储遇到的问题

[tingwensuojian]

使用aplayer核心

歌曲文件和歌词文件都是在阿里云/腾讯云对象存储中
在播放器中引用对象存储中文件时，只有歌曲文件加载出来，歌词文件加载不出来，见图下

使用alist本地存储的文件，就可以正常加载歌词文件

希望得到帮助。感谢

[yujiang]

我遇到同样的问题
lrc.js:122 Refused to connect to 'https://music-1254067592.cos.ap-guangzhou.myqcloud.com/lrc/nanhu-shaonianxing.lrc' because it violates the following Content Security Policy directive: "connect-src 'self' data: blob:".
chatgpt是这样回答的:

这是 CSP（Content Security Policy） 把你的歌词请求拦住了：你的页面里（或服务器响应头里）的策略写着
connect-src 'self' data: blob:，只允许向本站、本地 data/blob 发起 XHR/fetch/WebSocket 之类的“连接”。
而 lrc.js 用 fetch() 去请求 https://music-1254067592.cos.ap-guangzhou.myqcloud.com/...，不在白名单里，所以被拒。

有三种修法，任选其一（推荐 1）：

1. 放宽 CSP 的 connect-src 白名单（推荐）

把你页面里的 CSP meta 或服务器的 CSP header 加上 COS 域名（以及需要的话加上 media-src 等）。
如果你用的是 <meta http-equiv="Content-Security-Policy" ...>，改成类似这样：

如果你后面还会用更多 COS 域（或懒得逐个列），可以用通配或宽一点的方案：

注意：

meta 的 CSP 只能覆盖没有服务器强制 CSP header 的情况。如果你的服务器已经通过响应头下发了 CSP，必须改服务器响应头，meta 覆盖不了。

只要是 fetch()/XHR/WebSocket/EventSource 这类请求，都受 connect-src 控制；音频/视频文件的 URL 受 media-src 控制； 受 img-src 控制。

2. 走同源代理

如果你不想放宽 CSP，就在你的站点加一个代理路径，比如 /proxy/lrc?file=nanhu-shaonianxing.lrc，由你自己的服务器去拉 COS，然后把内容转发回来。前端就请求同源 URL（受 connect-src 'self' 允许）。

3. 内嵌或同源托管 LRC

把 .lrc 放到你自己的站点同源目录（或打包进页面，甚至用 data: URL）——这样 connect-src 'self' 就够了。

另外别忘了 COS 侧的 CORS：fetch() 需要目标域允许跨域读取。腾讯 COS 的桶要配置 CORS 规则（允许 GET/HEAD，AllowedOrigin 包含你的站点域名或 *）。
不过当前这个报错是 CSP 先拦了，先把 CSP 放开；如果随后出现 CORS 报错，再去 COS 控制台把该桶的 CORS 规则补上即可。