从GCP存储桶读取音频遭CORS策略拦截问题求助

你的问题核心是GCP存储桶未配置正确的CORS规则，导致localhost的跨域请求被浏览器拦截。虽然文件已公开，但跨域资源共享需要存储桶明确返回允许跨域的响应头，以下是具体解决步骤：

方法一：使用gcloud命令行配置CORS #

1. 创建一个名为cors.json的配置文件，内容如下（可根据需求调整允许的源）：

[
  {
    "origin": ["http://localhost"],
    "method": ["GET", "HEAD"],
    "responseHeader": ["Content-Type"],
    "maxAgeSeconds": 3600
  }
]

• origin：填写前端页面的域名，本地开发填http://localhost，生产环境替换为实际域名；若允许所有来源可使用["*"]（不推荐生产环境）。
• method：音频播放仅需GET和HEAD请求，保留这两个即可。
• responseHeader：Content-Type是音频播放必需的响应头。

2. 执行命令应用配置（替换blah-bucket-1为你的存储桶名称）：

gcloud storage buckets update gs://blah-bucket-1 --cors-file cors.json

方法二：通过GCP控制台配置CORS #

1. 打开GCP控制台，进入目标存储桶页面。
2. 切换到配置标签页，找到跨域资源共享 (CORS) 模块。
3. 点击添加规则，填写以下信息：
   • 来源：http://localhost（或你的实际域名）
   • 方法：勾选GET和HEAD
   • 响应头：Content-Type
   • 最大有效期：3600
4. 点击保存完成配置。

验证配置是否生效 #

用curl命令测试响应头是否包含Access-Control-Allow-Origin：

curl -H "Origin: http://localhost" -I https://storage.googleapis.com/blah-bucket-1/audio-files/13_chapter_.mp3

若返回的响应头中存在Access-Control-Allow-Origin: http://localhost，说明配置生效，刷新页面即可正常播放音频。

你的前端代码中crossorigin="anonymous"的配置是正确的，无需修改，只要存储桶CORS规则配置完成，跨域请求就会被浏览器允许。

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