问题描述
无法读取此文件:https://storage.googleapis.com/[bucket_name]/[filename].csv 来自在 http://localhost:3000 上运行的网页。
我想做什么:
这似乎很简单,我希望有一个通用模型。 Google Cloud 上的 ML 作业处理数据并将输出作为 .csv 文件放置在 Google Cloud Storage Bucket 中。我有一个包含 d3.js 可视化的 react.js Web 应用程序,此可视化的数据来自作为云存储桶的 .csv 文件。文件访问是“非公开”。
我将 Google Storage Bucket 上的 CORS 政策设置为:
[
{
"origin": ["http://localhost:3000"],"method": ["GET"],"maxAgeSeconds": 3000,"responseHeader": ["Authorization","Content-Range","Accept","Content-Type","Origin","Range","Access-Control-Allow-Origin"]
}
]
我得到了服务密钥 json 文件。
我在本地目录中设置了 $env:GOOGLE_APPLICATION_CREDENTIALS "service_key_file_path.json"
。
在 http://localhost:3000 上提供的 Web 应用程序中,我尝试使用此代码和 url 读取 .csv 文件(我在这里用占位符替换了存储桶和文件名):
d3.csv("https://storage.googleapis.com/[bucket_name]/[filename].csv",row).then(data => { ... });
d3.csv() 只是 fetch() 的包装器。除了获取 csv 文件之外,它还将数据转换为 json。
我还需要设置什么?请帮忙(使用 JavaScript)。
从通话中,我得到 status code: 403
详情在这里:
GENERAL
Request URL: https://storage.googleapis.com/bucket_name/filename.csv
Request Method: GET
Status Code: 403
Remote Address: 127.0.0.1:8888
Referrer Policy: strict-origin-when-cross-origin
RESPONSE HEADERS
access-control-allow-origin: http://localhost:3000
access-control-expose-headers: Accept,Access-Control-Allow-Origin,Authorization,Cache-Control,Content-Length,Content-Range,Content-Type,Date,Expires,Origin,Range,Server,transfer-encoding,X-GUploader-UploadID,X-Google-Trace
alt-svc: h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: private,max-age=0
content-length: 223
content-type: application/xml; charset=UTF-8
date: Thu,15 Apr 2021 04:30:23 GMT
expires: Thu,15 Apr 2021 04:30:23 GMT
server: UploadServer
vary: Origin
x-guploader-uploadid: ABg...3W4FQ
REQUEST HEADERS
:authority: storage.googleapis.com
:method: GET
:path: /bucket_name/file_name.csv
:scheme: https
accept: */*
accept-encoding: gzip,deflate,br
accept-language: en-US,en;q=0.9
origin: http://localhost:3000
referer: http://localhost:3000/
sec-ch-ua: "Google Chrome";v="89","Chromium";v="89",";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/89.0.4389.114 Safari/537.36
x-client-data: E...J3L
Decoded:
message Clientvariations {
// Active client experiment variation IDs.
repeated int32 variation_id = [3300111,3300134,3300161,3313321,3318776,3329330,3329635,3329704,3329769];
}
当我将此网址插入浏览器 https://storage.googleapis.com/bucket_name/filename.csv 时,我得到:
<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object.</Details>
</Error>
NEXT,我也尝试使用这个网址:https://storage.cloud.google.com/[bucket_name]/[filename].csv
当我从网络应用程序调用 url 时
d3.csv("https://storage.cloud.google.com/[bucket_name]/[filename].csv ",row).then(data => { ... });
我收到 CORS 错误 origin 'http://localhost:3000' 已被 CORS 策略阻止:请求的资源上不存在 'Access-Control-Allow-Origin' 标头。
这可能是因为谷歌说:
经过身份验证的浏览器下载端点 storage.cloud.google.com 不允许 CORS 请求。请注意,Cloud Console 为每个对象的公共网址链接提供此端点。 https://cloud.google.com/storage/docs/cross-origin
解决方法
正如每个字段的定义所述:
公共网址 (https://storage.googleapis.com/...):
任何拥有此链接的人都可以访问公共互联网上的对象
经过身份验证的网址 (https://storage.cloud.google.com/...):
只有被授予权限的用户才能使用此链接访问对象
因此决定哪一种最适合您的需求。
关于错误 Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object.
: Anonymous user 意味着在对 Cloud Storage 进行的调用中没有传递任何用户。请阅读此post并按照步骤操作。