Google Rails ActiveStorage 的云存储 CORS 问题

Question

我已经使用 gsutil 为我的存储桶设置了 CORS，我认为应该可以，但我还没有克服 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误。

这是我的 cors json:

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

我已确认这确实已设置：

gsutil cors get gs://mah-bucket
[{"maxAgeSeconds": 3600, "method": ["PUT", "POST", "GET", "HEAD", "DELETE", "OPTIONS"], "origin": ["*"], "responseHeader": ["Content-Type", "Content-MD5"]}]

这些是失败请求的临时 headers：

Content-MD5: Ug6Qj+DozqmniNxTXOYnDA==
Content-Type: application/vnd.openxmlformats-officedocument.wordprocessingml.document
Origin: https://subdomain.example.com
Referer: https://subdomain.example.com/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

我已经听从了这里的建议：https://github.com/rails/rails/issues/31523

我也尝试了新的隐身模式 window，因此它不会缓存之前 pre-flight 请求的任何内容。

更新： 我已将问题缩小到具有 google 服务的 ActiveStorage edge-case。普通文件上传表单适用于 Amazon S3 和 Google GCS 服务。使用 ActiveStorage DirectUploadController js 上传适用于亚马逊，但不适用于 Google.

除了服务之间的一些身份验证差异外，每种情况下发出的请求都是相同的，但是对 pre-flight 请求的响应是不同的。这是 S3 pre-flight 请求响应：

Access-Control-Allow-Headers: content-md5, content-type
Access-Control-Allow-Methods: PUT, POST, GET, HEAD
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3600
Content-Length: 0
Date: Tue, 24 Jul 2018 22:32:51 GMT
Server: AmazonS3
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2: xxx/x/xxx
x-amz-request-id: xxx

这是 GCS pre-flight 请求响应：

access-control-allow-headers: Content-Type,Content-MD5
access-control-allow-methods: PUT,POST,GET,HEAD,DELETE,OPTIONS
access-control-allow-origin: *
access-control-max-age: 3600
alt-svc: quic=":443"; ma=2592000; v="44,43,39,35"
cache-control: private, max-age=0
content-length: 0
content-type: text/html; charset=UTF-8
date: Tue, 24 Jul 2018 22:43:25 GMT
expires: Tue, 24 Jul 2018 22:43:25 GMT
server: UploadServer
status: 200
x-guploader-uploadid: xxx-xxx

尽管看起来很愚蠢，但这似乎是一个 case-sensitivity 问题。

Answer 1

你是按字面意思使用：

"https://subdomain.example.com",
"https://example.com",
"https://*.example.com"

作为起源？如果是这样，那可能就是问题所在。您可能不会从这些域中的任何一个调用您的 gs 存储桶。您应该拥有调用它的域。包括 localhost:port 如果从那里进行测试

Answer 2

事实证明，我从 Rails 复制的 direct_uploads_controller.js 文件的版本在浏览器和服务兼容性方面存在许多问题。我复制了这个文件夹中的所有文件并安装了丢失的 spark-md5 包，现在一切都很好： https://github.com/rails/rails/tree/master/activestorage/app/javascript/activestorage

我测试过的提交是 372dda2a2950ad3ae5cf744ed8e3caa69a7ed44b。

Answer 3

如果有人仍然被这个问题困扰，那是因为缺少 CORS 配置 Origin 和 Content-Disposition 响应 headers。至少对我来说是这样。

因此，配置应该如下：

[
  {
    "origin": ["https://www.example.com"],
    "method": ["PUT"],
    "responseHeader": ["Origin", "Content-Type", "Content-MD5", "Content-Disposition"],
    "maxAgeSeconds": 3600
  }
]

来源：https://guides.rubyonrails.org/active_storage_overview.html#example-google-cloud-storage-cors-configuration

Google Rails ActiveStorage 的云存储 CORS 问题

Google Cloud Storage CORS issue with Rails ActiveStorage

amazon-s3

gcloud

rails-activestorage