Google Cloud Storage 存储桶 CORS 策略对所有内容都是*，但我仍然遇到 CORS 失败

Question

确实有大量 CORS GCP 云存储问题，但没有一个能解决我的问题。

我正在使用一个签名的Url，可恢复，生成如下：

file.getSignedUrl({
    action: 'resumable',
    expires: Date.now() + 60 * 60 * 1000, // 60 minutes
    contentType: 'text/csv',
  })

我从

res.headers.location

获取位置并使用它开始写入块：

axios.put(res.headers.location, 'Hello World!', { headers: { 'Content-Type': 'text/csv' } })

这一切在服务器上运行良好。

当我尝试在浏览器中使用该 URL 执行 PUT 时，它会成功（PUT 返回 200），但浏览器会生成 CORS 错误。

我已经尝试了我能想到的所有可能的 CORS 配置排列。我目前尽可能允许它：

user % gcloud storage buckets describe gs://my-bucket --format="default(cors_config)"
cors_config:
- maxAgeSeconds: 30
  method:
  - '*'
  origin:
  - '*'
  responseHeader:
  - '*'

我还尝试向浏览器调用添加额外的标头，例如：

axios
  .put(
    url,
    'Hello World!',
    { headers: { 'Content-Type': 'text/csv', 'Access-Control-Allow-Origin': '*' } },
  )

我得到的具体错误是：

account-type:1 Access to XMLHttpRequest at (the url) from origin (web client url) has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我添加了origin，将其留空，添加通配符，将我知道需要的标头放入responseHeaders中，将universe中的每个标头添加到responseHeaders中，使其成为通配符。

我不知道该尝试什么了。

预检响应标头：

Access-Control-Allow-Credentials:
true
Access-Control-Allow-Headers:
access-control-allow-origin,content-type
Access-Control-Allow-Methods:
PUT
Access-Control-Allow-Origin:
https://my-site:3000
Alt-Svc:
h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
Content-Length:
0
Content-Type:
text/plain; charset=utf-8
Date:
Wed, 13 Dec 2023 22:29:25 GMT
Server:
UploadServer

PUT 响应标头：

Alt-Svc:
h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
Content-Length:
0
Content-Type:
text/html; charset=UTF-8
Date:
Wed, 13 Dec 2023 22:29:25 GMT
Etag:
"ed076287532e86365e841e92bfc50d8c"
Server:
UploadServer
Vary:
Origin
X-Goog-Generation:
1702504413283130
X-Goog-Hash:
crc32c=/mzx3A==
X-Goog-Hash:
md5=7Qdih1MuhjZehB6Sv8UNjA==
X-Goog-Metageneration:
1
X-Goog-Stored-Content-Encoding:
identity
X-Goog-Stored-Content-Length:
12
X-Guploader-Uploadid:
(big long alphanumeric id)

Answer 1

成功了。我所要做的只是在服务器端进行更改，当通过 POST 启动上传时，我必须添加 Web 服务器的来源。由于某种原因，此源包含在预检的相应标头中，但不包含在实际的 PUT 中。

我仍然不知道如何（或者是否可能）在客户端启动上传（通过 POST） - 我无法完成这项工作。

...但是如果您在服务器端启动它 - 生成签名URL后，您可以像这样使用它：

axios
    .post(url, undefined, {
      headers: {
        'Content-Type': 'text/csv',
        'x-goog-resumable': 'start',
        Origin: 'https://app.mysite.com:3000',
      },
    })
    .then((res) => {
      return res.headers.location;
    });

...然后您可以在客户端使用 res.headers.location 对文件块执行 PUT。

现在我知道答案了，这可能被认为是以下内容的重复：

Google Storage API - 可续传上传、AJAX、CORS 错误

...尽管作为这些信息的消费者，我认为两者的出发点都足够不同，因此提出两个问题都会增加价值。