在 Google Cloud Bucket 上上传图片时出现 CORS 错误答案

【问题标题】：CORS error while uploading image on Google Cloud Bucket在 Google Cloud Bucket 上上传图片时出现 CORS 错误
【发布时间】：2019-11-21 14:08:30
【问题描述】：

我正在尝试将图像直接从浏览器上传到 Google Cloud 存储桶。我在后端使用gcs-signed-urls 并遵循this 示例。

这是我的表单上传，工作正常。

<form action={"https://" +this.state.imageForm.bucket +".storage.googleapis.com"}  method="post" enctype="multipart/form-data">
<input type="hidden" name="key" value={this.state.imageForm.key}></input>
<input type="hidden" name="bucket" value={this.state.imageForm.bucket}></input>
<input type="hidden" name="GoogleAccessId" value={this.state.imageForm.GoogleAccessId}></input>
<input type="hidden" name="policy" value={this.state.imageForm.policy}></input>
<input type="hidden" name="signature" value={this.state.imageForm.signature}></input>
<input type="hidden" name="Content-Type" value={this.state.imageForm.contenttype}></input>
<input name="file" type="file"></input>
<input type="submit" value="Upload"></input>

现在我正在尝试使用 Axios 将其转换为表单发布请求。

 let data = new FormData();
data.append("key",this.state.imageForm.key+ "." + picture[0].type.replace("image/", ""))
data.append("bucket", this.state.imageForm.bucket);
data.append("GoogleAccessId", this.state.imageForm.GoogleAccessId);
data.append("policy", this.state.imageForm.policy);
data.append("Content-Type", 'application/octet-stream');
data.append("file", picture[0]);
console.log("data", data);
let config = {
  headers: {
    'Content-Type': 'multipart/form-data',
    'Access-Control-Allow-Origin': '*',
  }
}
let result = await axios.post("https://" + this.state.imageForm.bucket + ".storage.googleapis.com",
  data, config)

我收到 2 个错误：

1 - CROS 错误

create:1 Access to XMLHttpRequest at 'https://ccc.storage.googleapis.com/' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2- 发布请求失败，响应为 400 错误。

这是来自开发者控制台的快照。

我还更新了我的存储桶的 Cors 文件，这是配置

  {
  "origin": [*],
  "responseHeader": ["Content-Type", "access-control-allow-origin"],
  "method": ["GET", "HEAD", "DELETE", "PUT", "POST"],
  "maxAgeSeconds": 3600
}

【问题讨论】：

标签： google-cloud-storage

【解决方案1】：

我在API POST method docs中发现了以下注释

注意：POST 对象方法不支持signed URLs，resumable uploads 的情况除外。

因此，您可以尝试PUT method 或按照文档中的说明执行resumable upload

【讨论】：