本地主机上的网页无法访问 Google Cloud Storage 存储桶 file.csv

如何解决本地主机上的网页无法访问 Google Cloud Storage 存储桶 file.csv

无法读取此文件：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并按照步骤操作。