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

问题描述

无法从 http://localhost:3000 上运行的网页读取此文件：https ://storage.googleapis.com/[bucket_name]/[filename].csv。

我想做什么：

这似乎很简单，我希望有一个通用的模型。Google Cloud 上的 ML 作业处理数据并将输出作为 .csv 文件放置在 Google Cloud Storage Bucket 中。我有一个包含 d3.js 可视化的 react.js Web 应用程序，该可视化的数据来自作为云存储桶的 .csv 文件。文件访问是“不公开的”。

我将 Google 存储桶上的 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 错误来源“http://localhost:3000”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这可能是由于谷歌说：

经过身份验证的浏览器下载端点 storage.cloud.google.com 不允许 CORS 请求。请注意，Cloud Console 为每个对象的公共 URL 链接提供此端点。 https://cloud.google.com/storage/docs/cross-origin

标签： d3.jsgoogle-cloud-storage

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

问题描述

解决方案

推荐阅读