Облачное хранилище Установите CORS, чтобы разрешить загрузку функции Firebase

Question

У меня есть функция firebase, которая обслуживает веб-сайт, как показано ниже:

const app = express();
app.use(express.static("my-website"));
exports.app = functions.https.onRequest(app);

Где my-website имеет my-website/subfolder/index.html и my-website/subfolder/index.js. Я развернул функцию, и она успешно обслуживает index.html и index.js. Однако index.js пытается загрузить файл из облачного хранилища, но получает следующую ошибку:

Access to XMLHttpRequest at 'https://storage.cloud.google.com/my-project.appspot.com/my-project-files/data.csv' from origin 'https://us-central1-my-project.cloudfunctions.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Я не использую веб-библиотеку облачного хранилища firebase, потому что код уже написан с использованием d3.js, как показано ниже, и я не могу ее изменить:

d3.queue()
    .defer(
      d3.csv,
      "https://storage.cloud.google.com/my-project.appspot.com/my-project-files/data.csv"
    )
    .defer(d3.json, "data/config.json")
    .defer(d3.json, "data/geog.json")
    .await(ready);

Этот код генерирует следующий запрос:

:authority: storage.cloud.google.com
:method: GET
:path: /my-project.appspot.com/my-project-files/data.csv
:scheme: https
accept: text/csv,*/*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
cache-control: no-cache
origin: https://us-central1-my-project.cloudfunctions.net
pragma: no-cache
referer: https://us-central1-my-project.cloudfunctions.net/app/my-website/subfolder/index.html
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

Я установил политику CORS для своей корзины на разрешить запросы от моих облачных функций, gsutil cors get gs://my-project.appspot.com возвращает:

[{"maxAgeSeconds": 3600, 
"method": ["GET"], 
"origin": ["https://us-central1-my-project.cloudfunctions.net"], 
"responseHeader": ["Content-Type"]}]

Я не уверен, куда go отсюда. Что я делаю не так?

Answer 1

Я понял, что проблема в том, что облачное хранилище фактически не позволяет вам разрешить CORS для storage.cloud.google.com, вместо этого вы должны использовать storage.googleapis.com.

Answer 2

Это довольно частая ошибка для людей, настраивающих веб-приложения. Чтобы обеспечить безопасность сайтов и предотвратить внедрение кода, браузеры предотвращают запросы из разных источников. У Mozilla есть отличное руководство, как решить эту проблему. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors