带有 Google Storage 的 CORS 策略允许来自我的来源，但不存在“Access-Control-Allow-Origin”标头

Question

我是 CORS 配置的新手并试图解决这个问题，但根据文档，我的设置看起来是正确的。我希望你能帮我看看我错过了什么。我的代码正在尝试PUT使用签名 url将 ( ) 文件直接上传到谷歌存储。

访问 XMLHttpRequest ' https://storage.googleapis.com/herdboss-dev.appspot.com/uploads/152/152-owner-152-61.jpg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Go ...' 来自 ' https://herdboss-dev.appspot.com ' 已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头。

我已经在我的 Google 存储桶上设置了 CORS 策略（为了可读性添加了换行符）：

% gsutil cors get gs://herdboss-dev.appspot.com               
[{
"maxAgeSeconds": 3600, 
"method": ["GET", "HEAD", "PUT"], 
"origin": ["https://herdboss-dev.appspot.com"], 
"responseHeader": ["X-Requested-With", "Access-Control-Allow-Origin", "Content-Type"]
}]

根据我的 chrome 检查员，飞行前请求发生并返回正确的方法和标题（据我所知）。另外，作为旁注，我注意到 PUT 在 OPTIONS 之前出现在我的 Chrome 检查器中，但时间戳显示 OPTIONS 是最先发送的。

当OPTIONS调用发生时，Google Storage 会正确响应并表示它可以支持我的请求方法GET, HEAD, PUT和来源https://herdboss-dev.appspot.com：

---

放置请求

但是，当PUT发生这种情况时，Google Storage 不会以正确的Access-Control-Allow-Origin标头响应：

我错过了什么或做错了什么？PUT当我进行直接 http 调用时，我可以使用这些签名的 url 将文件直接放入我的 Google Storage 存储桶中，所以我知道签名的 url 有效。我只是遇到了这个 CORS 问题。这对我来说是一个新事物，我以前没有处理过它，但似乎我正在设置我应该设置的所有东西。

**编辑1：

我尝试将允许的来源设置为*仅作为测试，但我仍然被相同No 'Access-Control-Allow-Origin' header is present on the requested resource.的拒绝Chrome 检查器显示OPTIONS响应确实发回了我*的允许来源，但它仍然不起作用并且仍然给出相同的错误。

Answer 1

Figured it out.

Short version: Chrome's error message about CORS was a red herring. Google Storage was rejecting the request which was being interpreted as a CORS violation.

Long version:

I noticed in Chrome's inspector that the response to my PUT request had a content length of 862 characters, but Chrome wasn't showing me any response. I opened Firefox and tried the upload process again and it failed with the same error messages about CORS and Access-Control-Allow-Origin. However, in Firefox's network inspector, I was able to see the raw response body!

<Error>
    <Code>SignatureDoesNotMatch</Code>
    <Message>The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method.</Message>
    <StringToSign>.....</StringToSign>
    <CanonicalRequest>PUT
/herdboss-dev.appspot.com/uploads/152/152-owner-152-72.png
X-Goog-Algorithm=GOOG4-RSA-SHA256&amp;....;X-Goog-SignedHeaders=content-type%3Bhost
content-type:image/png
host:storage.googleapis.com

content-type;host
UNSIGNED-PAYLOAD
    </CanonicalRequest>
</Error>

My theory is that when Chrome and Firefox do the pre-flight CORS checking and then issue the PUT request and receive a 403 response code that it is responding as if it is a CORS problem even though the problem was not CORS related and the preflight response DID actually have the Access-Control-Allow-Origin header.

从这里，我能够通过根据请求检查我的 url 签名代码来快速诊断问题。我注意到，当创建签署上传网址，我是需要Content-type的application/octet-stream，但是当在浏览器中的JavaScript是做PUT它被设置请求Content-type到image/png。我更新了我的 javascript 以强制Content-type匹配application/octet-stream，然后请求成功。