Ошибка возникает при получении данных из Firebase

Question

Привет, я сохранил мои mp3 файлы внутри Хранилище в Firebase.Установите права доступа на вкладке «Правила» следующим образом:

      allow read, write, request;

Для того, чтобы получить оттуда файлы, я использую реагирование-аксиос.

Когда я загружаю свою страницу, я получаю сообщение об ошибке, что запрос был заблокирован политикой CORD:

Access to XMLHttpRequest at 
'gs://******.appspot.com/****/****' from origin 'http://localhost:3000' 
has been blocked by CORS policy: Cross origin requests are only 
supported for protocol schemes: http, data, chrome, chrome-extension, 
https.

Я установил gsutil, а затем выполнил команду:

gsutil cors set cors.json gs://****.appspot.com

Я не получил никаких ошибок при выполнении этой команды.

Это файл cors.json:

[ 
 {
  "origin": ["http://localhost:3000","gs://******.appspot.com"],
  "method": ["GET"],
  "maxAgeSeconds": 3600
 }
]

Однако, когда я загружаю свой веб-сайт, я все равно получаюта же ошибка ...

Answer 1

Ключевые части сообщения об ошибке:

Запросы перекрестного происхождения поддерживаются только для схем протокола

И

Доступв XMLHttpRequest по адресу "gs: //******.appspot.com/****/****" из источника "http://localhost:3000'

Выпытается получить доступ к URL, начинающемуся с gs:// из JavaScript, который работает на http://.Это два разных протокола, и в сообщении об ошибке говорится, что это недопустимо.

Для загрузки файла из облачного хранилища вы обычно используете:

• либо URL-адрес загрузки, который вы генерируете дляфайл, который является общедоступным (но не угадываемым) URL-адресом.URL-адрес загрузки начинается с https://, поэтому он подходит для перекрестных оригинальных запросов с вашей страницы.См. Документацию Firebase по загрузке файла через URL .
• или вы используете Firebase SDK для доступа к данным.Firebase SDK использует собственный протокол, на который не влияют требования к другим источникам.Вы можете использовать gs: URL, который вы сейчас используете с этим SDK. Похоже, что этот подход недоступен в JavaScript SDK.

Answer 2

Поскольку в сообщении об ошибке указано, что запросы на пересечение отправлений разрешены только для определенных протоколовЭто мера безопасности, реализованная в большинстве браузеров.Если вас интересует, почему эта политика такова, то есть хорошая статья на codecademy об этом.

Мое предлагаемое решение для этой проблемы - настроить бэкэнд-сервер api на этом хосте.Кроме того, пусть он запрашивает необходимую информацию из базы данных, добавляет необходимые заголовки CORS и отправляет ее в браузер, на котором работает ваш веб-интерфейс.

Вы можете сделать это, используя node.js, используя express.js.Пожалуйста, смотрите пример ниже.

const cors = require('cors');
const express = require('express');
const app = express();

function getmusicfunction(req, res) {
  console.log('GET /getmusic');
  # query the db for your file here and store it into your body bariable
  res.send(body);
}

const corsOptions = {
  origin: '*',
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));
app.get('/getmusic', (req, res) => getmusicfunction(req, res));

const port = 6667;
app.listen(port, () => console.log('API listening on port ' + port + '!'));

РЕДАКТИРОВАТЬ: Я перепутал Firebase с Firebird.Сожалею.Я снимаю этот ответ.