ajax - 带有 Google Storage 的 CORS 策略允许来 self 的来源，但不存在 'Access-Control-Allow-Origin' header

Question

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

Access to XMLHttpRequest at 'https://storage.googleapis.com/herdboss-dev.appspot.com/uploads/152/152-owner-152-61.jpg?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Go...' from origin 'https://herdboss-dev.appspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经在我的 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 请求

然而，当 PUT发生时，Google Storage 不会以正确的方式响应 Access-Control-Allow-Origin标题:



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

**编辑1:

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

Answer 1

弄清楚了。

简短版本:Chrome 关于 CORS 的错误消息是一个红鲱鱼。 Google Storage 拒绝了被解释为违反 CORS 的请求。

长版:

我在 Chrome 的检查器中注意到对我的 PUT 的响应request 的内容长度为 862 个字符，但 Chrome 没有显示任何响应。我打开 Firefox 并再次尝试上传过程，但失败并显示有关 CORS 和 Access-Control-Allow-Origin 的相同错误消息。 .但是，在 Firefox 的网络检查器中，我能够看到原始响应正文!

<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>

我的理论是，当 Chrome 和 Firefox 进行飞行前 CORS 检查，然后发出 PUT 请求并收到一个 403 响应代码时，它就像是一个 CORS 问题一样响应，即使问题与 CORS 无关且飞行前响应DID 实际上有 Access-Control-Allow-Origin标题。

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