google-cloud-platform - 为什么 Google Cloud Storage 总是回答 cors 错误 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

我正在尝试从客户端浏览器将文件上传到 Google 云存储 (GCS)。为此，我在 node.js 中有一个后端从 GCS 请求一个签名 URL，然后将其传输到前端客户端以上传文件。签名 URL 请求代码如下:

const options = {
    version: "v4",
    action: "write",
    expires: Date.now() + 15 * 60 * 1000, // 15 minutes
    contentType: content_type,
  };

  // Get a v4 signed URL for uploading file
  const [url] = await storage
    .bucket(bucketName)
    .file(filename)
    .getSignedUrl(options)

这是有效的。当我尝试在客户端上使用签名 URL 时出现问题。每个请求都以以下错误结束:

Access to XMLHttpRequest at 'https://storage.googleapis.com/deploynets_models/keras_logo.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=urlsigner%40deploynets.iam.gserviceaccount.com%2F20200711%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20200711T192805Z&X-Goog-Expires=900&X-Goog-SignedHeaders=content-type%3Bhost&X-Goog-Signature=82b73435e4759e577e9d3b8056c7c69167fdaac5f0f450381ac616034b4830a7661bdb0951a82bf749a35dc1cf9a8493b761f8993127d53948551d7b33f552d118666dcf8f67f494cfaabf2268d7235e955e1243ce3cd453dcc32552677168ad94c6f1fca0032eb57941a806cc14139915e3cd3efc3585497715a8ad32a1ea0278f2e1165272951ae0733d5c6f77cc427fd7ff69431f74f1f3f0e7779c28c2437d323e13a2c6474283b264ab6dc6a94830b2b26fde8160684839a0c6ea551ca7eff8e2d348e09a8c213a93c0532f6fed1dd167cd9cf3480415c0c35987b27abd03684e088682eb5e89008d33dcbf630b58ea6b86e7d7f6574466aa2daa982566' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经使用以下 JSON 在 GCS 存储桶上设置了 CORS 策略:

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    "responseHeader": ["*"],
    "maxAgeSeconds": 120
  }
]

(例如，我还尝试将来源具体列为 http://localhost:3000)

应该提到的是，我已经让它在一种特定情况下工作:当上传负载只是一个普通字符串时。由于某种原因，它工作正常。

我已经在网上查找了所有可能的类似错误，但到目前为止无济于事。有什么想法吗？

Answer 1

更新:终于让它工作了!我必须添加 contentType: 'application/octet-stream', 和 processData: false, 才能正常工作。否则我会得到错误:

1. CORS 错误 从来源“http://localhost:8080”获取“https://storage.googleapis.com/...”的访问已被 CORS 策略阻止:无“访问控制” -Allow-Origin' header 出现在请求的资源上。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
2. Uncaught TypeError: Illegal invocation 和 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer on 'Blob': Illegal invocation

所以最终的 AJAX 请求看起来像这样(有效):

$.ajax({
  url: <GCS signed upload URL>,
  type: 'PUT',
  data: f, //file object
  contentType: 'application/octet-stream', //seems to be required
  processData: false, //seems to be required
})

我还必须使用以下命令设置存储桶 CORS:

gsutil cors set gcs_cors.json gs://<my_bucket>

文件 gcs_cors.json 内容为:

[
  {
    "origin": ["https://<myapp>.appspot.com", http://localhost:8080"],
    "responseHeader": ["Content-Type"],
    "method": ["GET", "HEAD", "DELETE", "PUT", "POST"],
    "maxAgeSeconds": 120
  }
]

原帖:我不确定这对您有何帮助(不过很高兴!)，我尝试过直接使用该文件并使用表单数据，但没有成功。上传到 GCS 似乎是一个令人沮丧的过程。我希望 documentation会有一个完整的工作示例(前端/后端)，但似乎并非如此。