Реагировать axios.get - Firebase

Question

Я загрузил некоторые mp3-файлы в свое Хранилище в Firebase.

Я использую axios для получения соответствующих файлов, которые хранятся в Хранилище.

На вкладке "правила" я изменил разрешения на:

      allow read, write, request;

Однако при запуске веб-сайта все равно появляется ошибка:

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.

Этомой код:

constructor(props) {
    super(props);

    this.state = {
        allRecords: [],
}

componentDidMount () {
  axios.get('gs://******.appspot.com/****/****')
      .then(response => {
        this.setState({allRecords: response.data})
        console.log(response.data)
      })
      .catch(error => alert("An error has occurred, please try again and check your internet connection."))
    }

Я что-то не так делаю?Я полностью уверен, что адрес метода get в порядке (я только что скопировал его из Firebase).

---

Редактировать:

Я запускаю команду

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

И все же я получаю ту же ошибку при загрузке моего сайта.

Answer 1

Вам необходимо обновить политику CORS в хранилище Cloud Storage, чтобы таким образом загружать файлы прямо в браузер. ¹

Для этого вы можете использовать инструмент командной строки gsutil.Типичный файл политики для вашего сценария может содержать следующие директивы:

[
  {
    "origin": ["http://localhost:3000"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Вы можете обновить список источников с другими хостами, которым вы хотите получить доступ к корзине.

Answer 2

Использование расширения не является идеальным решением. Звучит так, как будто CORS не настроен на сервере, я не совсем уверен, но ознакомьтесь с этим ответом stackoverflow , Еслинаправить вас к этой группе .

Answer 3

Установите расширение CORS chrome и включите его, это добавляет заголовки Access-Control-Allow-Origin, Access-Control-Allow-Methods и Access-Control-Allow-Headers для CORS.