使用签名 URL 的 Google Cloud Storage 上传会在实际请求时出现 cors 问题

Question

我有一个奇怪的问题，我似乎无法弄清楚。我有一个 Google Cloud Storage 存储桶，我想从网页上传文件到其中。在我的后端（App Engine）中，我创建了可用于上传文件的签名 URL。当我在 Postman 中使用带有 PUT 请求和文件的签名 URL 时，该文件已成功上传到我的存储桶。

\n\n

当我从网页上做同样的事情时，事情就变得棘手了。\n我在我的网页中创建了以下代码：

\n\n

var req = new XMLHttpRequest();\nreq.open("PUT", resp.url);\nreq.setRequestHeader("Content-Type", parameters.contentType);\nreq.onload = function(event) {\n    this.loadFileList();\n}.bind(this);\nreq.send(this.$.fileInput.files[0]);\n

\n\n

这给我带来了预检请求（选项）上的 CORS 问题。经过一番阅读后，我发现在 Google Cloud Storage 上设置 CORS 配置。所以我设置了以下配置：

\n\n

[\n  {\n    "origin": ["https://my-website"],\n    "responseHeader": ["Content-Type"],\n    "method": ["GET", "HEAD", "PUT", "OPTIONS", "POST"],\n    "maxAgeSeconds": 3600\n  }\n]\n

\n\n

当我将此配置放入 Google Cloud Storage 时，我看到预检请求开始工作，但实际请求仍然失败，并出现以下错误：

\n\n

\n

跨源请求被阻止：同源策略不允许读取位于\n https://storage.googleapis.com/[my-bucket].appspot.com/games/dev/game-[game]/的远程资源game-pictures/[文件].jpg?GoogleAccessId=[帐户]&Expires=[过期]&Signature=[签名] .\n（原因：CORS 标头 \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\ x99 缺失）。

\n

\n\n

（我替换了网址的某些部分，这样我就不会暴露有关我的存储桶的任何内容）

\n\n

实际错误是真的。实际请求的响应中缺少 Access-Control-Allow-Origin，但在预检请求的响应中存在。

\n\n

那么，我应该在实际请求的响应中获取 Access-Control-Allow-Origin 吗？为什么我不明白？我该如何解决这个问题？

\n

Answer 1

请阅读下面的文章，它清楚地解释了如何在使用java脚本进行调用时解决cors问题。 https://developers.google.com/api-client-library/javascript/features/cors